<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport"
          content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../Styles/base.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<p>About Face 4 :交互设计精髓</p>

<p><span id="filepos0002432636"></span></p>

<p><font size="6">其他设备</font></p>

<p>与桌面计算机或高分辨率的移动设备上的界面设计不同，嵌入式设备的交互设计，要特别 关注它们的使用情境。因为它们处于十分真实的生活和工作情境中，它们的周围可能是很嘈杂
    的，有较大干扰的。此外，我们还要考虑这些设备的屏幕的局限性，例如尺寸和像素等，以及 有限的计算处理能力。我们一定不要忽视这些特殊的情况，才能为之创造出良好的使用体验。
    信息台及各式各样的嵌入式系统：例如电视、微波炉、汽车仪表盘、照相机、银行设备、还有 洗手间等设备的平台各不相同，均有各自的机会和局限。</p>

<p><span id="filepos0002433507"></span></p>

<p>一般性设计原则</p>

<p>嵌入系统（内置了软件系统的物理设备）和桌面系统相比，除了它们都有软件交互这一类 似的地方之外，嵌入系统有其独特的困难和问题。在为嵌入系统设计的时候，无论是智能家电、 信息台系统，还是手持设备，我们都必须牢记如下原则：</p>

<p>• 不要把你正在设计的产品认为是计算机。</p>

<p>• 把硬件和软件设计集成在一起。</p>

<p>• 让使用情境来驱动设计。</p>

<p>• 模式的运用要明智，如果有的话。</p>

<p>• 限定范围。</p>

<p>• 要根据显示器的分辨率来考虑导航。</p>

<p>• 尽可能简化输入。</p>

<p>在下面的小节中，我们将讨论这些原则。</p>

<p>不要把你正在设计的产品认为是计算机</p>

<p>如果你设计的不是计算机，而是嵌入系统，那么这一条设计原则可能是最重要的，即便它 有像计算机一样的显示器，也一定要遵守。通常，对你设计的产品能做什么，用户有着非常具
    体的期望（例如家电产品或者熟悉的手持设备），或者几乎没有任何期望（例如公共信息台）。 千万不能将桌面计算机的术语和习惯，不假思索一股脑地扔给相对简单的设备上，比如照相机
    或者微波炉。同样，专业技术类的设备仪器的使用者们，也不希望在计算机操作系统或者文件 系统里走迷宫，他们要的是，在其专业领域内快速直接地找到所需的数据和功能。</p>

<p>设计师，尤其是桌面应用的设计师，可能会很容易忘记这一点：他们正在开发设计的软件， 实际上并不一定是运行在典型桌面系统上的软件。一般的桌面软件都运行在全色彩的大屏幕上、</p>

<p>458<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 19 章为移动设备和其他设备而设计</p>

<p>有较强的处理能力和较多的内存、有全尺寸键盘、有鼠标设备，而在大多数嵌入系统中这些情 况极少出现。更为重要的是，这些产品的使用场合和桌面计算机非常不同。一些适合桌面计算 机的术语可能完全不能用在嵌入系统中。 “Cancel”
    按键在计算机很常见，很合适，但完全不能 用于微波炉的电源开关按钮上，我们也不能用 “settings” 选项让使用者调节空调的温度，这会 很荒唐。我们不能仅仅将计算机界面压缩变小放在小屏幕的设备上就可以了，我们必须要考虑
    这个设备的用途，还必须要考虑如何运用数字科技去增强和改善用户的体验。</p>

<blockquote>
    把硬件和软件设计集成在一起
</blockquote>
<p>嵌入系统的优势在于定制化的硬件。通常，桌面计算机是通用的，而嵌入系统则是专用的， 被用来设计完成一个或一些特定的工作。考虑到成本、处理能力、耗电及外形大小的限制，基 于硬件的导航和输入控制必须要取代基于屏幕的导航和控制。</p>

<p>因此，系统界面上的软件元素和硬件元素的设计，都是很关键的。而且，从目标导向、人 体工学及美学的角度来考虑，软硬件之间的交互同样也是很关键的。当今市场上的一些数字产
    品中，最优秀的、最具创新的那些设计就是综合考虑了硬件和软件，使得两者紧密地无缝结合， 比如 TiVo 和 iPod, 从而才能创造出广受欢迎的卓越产品（参见图 19-40 )。硬件工程师完成机
    械和工业设计部分后，如果不从用户的角度考虑最佳方案，而只是将其简单地扔给软件团队了 事，软件团队将不得不削足适履，这完全不是正确的标准开发流程。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="320" src="../Images/Image00150.jpg"
                                                width="381"/></p>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> 1940 Cooper <font size="2">公司设计的智能座机电话，表现出软硬件控制的紧密结合。通过硬件控制，用户可以很容易地调节音
    量、免提、拨号、控制语音留言的回放等：通过触摸屏和栂指拨轮，可以管理和操作已知联系人和号码、来电、通话记 录、语音留言和电话会议功能等。这个系统并没有试图去提供过多的功能</font> . <font size="2">而将重点放在了那些最为常用的、最为重要
    的电话功能，并力图让这些功能使用起来更容易，触摸屏上可触控部件的尺寸适合手指的大小，屏幕上还提供了使用提 示的文本信息，这些都增强了交互体验。</font>
</blockquote>
<blockquote>
    459
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p>让使用情境来驱动设计</p>

<p>嵌入系统和桌面应用的另一个主要区别在于使用情境的不同。尽管桌面应用也有使用情境 的考虑，但设计者通常都可以认为，多数桌面软件都是在相对安静的、私密的、静止的环境下
    使用的。尽管目前笔记本电脑兼具桌面和无线移动的能力，但实际上，其使用场合同桌面机相 比，并没有发生太多的变化。由于笔记本电脑的物理形态因素（译者注：是指大小、重量等） 的限制，在使用的时候，通常还是处于静止和安静的环境中。</p>

<p>而很多的嵌入设备则恰恰相反，这些系统的使用，或在持续移动中（比如手持设备），或 虽然静止但却处于公共场所下（比如信息台）。尽管也有些嵌入系统是静止的、且用在相对隐
    私的场所下（比如家用电器），但它们仍然有明显的情境元素：比如一个人在手忙脚乱地准备 招待客人的晚餐时，肯定没有心思去应付智能烤箱上复杂烦琐的控制系统。在车载导航系统 上，千万不要使用可按情境更改意思的 “ 软键 ”
    ，这样不安全，因为司机的双眼离不开路面， 没有时间去看功能按钮上的标签。类似的，在生产车间里的技术工人，也不应该把过多的精 力用在弄懂难于理解的设备控制上，这样会分散人的注意力，在某些情况下有可能会造成重 大伤亡事故。</p>

<p>因此，嵌入系统的设计，必须要非常紧密地与使用情境匹配起来。对于手持设备，考虑使 用情境时，我们要关注：该设备在什么场合下使用？物理上该如何操作？如何持握该设备？这
    个设备是单手持握、还是双手持握？在不是立即需要使用时，这个设备如何放置？放置在什么 地方？当使用这个设备时，使用者还会从事哪些其他的活动或者动作？这个设备通常在何种环
    境下被使用？这个环境是吵闹的、明亮的、还是黑暗的？如果使用者身处公共场合使用该设备 时，被他人看到、听到，使用者会有怎么样的感受？我们稍后会详细讨论一下这些问题。</p>

<p>对于信息台系统，情景方面的考虑，主要集中在该信息台所处的环境，还有其社会影响： 该信息台在这个环境下，要起什么作用？它是提供辅助信息的、还是本身只是一个吸引人的摆
    设？所处环境周围的建筑设计是否考虑了去引导人们来到信息台面前？每次会有几个人来使用 信息台？信息台的数量是否足够多，才不至于让人们等待很长时间？该环境下是否有足够的空
    间来摆放信息台？信息台是否会妨碍交通或行走？我们马上会讨论这些以及其他的问题。</p>

<p>模态的运用要明智，如果有的话</p>

<p>桌面计算机应用有丰富的模态（也称之为模式 ) ：软件可以有很多种不同的形式，输入和其 他的操控部件可以映射到不同的行为。软件的工具栏（比如 Photoshop 软件中的工具栏）就是
    很好的例子：选择一个工具，鼠标和键盘动作就会被映射到该工具预先定义好的一组功能上； 再选择另一个工具，新的一组动作又会被映射到新选择的工具上。</p>

<p>很可惜，一些不太清晰的模态化行为，常会轻易地将用户搞糊涂。手持设备的显示屏通常</p>

<p align="right" height="0pt" width="0pt">第 19 章为移动设备和其他设备而设计</p>

<p>较小，输入方式相对有限，很难转换到某种模式中。实际上，模式的转换，通常需要非常费时 费力的导航工作。就拿手机来说，大量的模式被组织成层次菜单结构，但大多数手机使用者仅
    仅使用拨号和地址簿功能，他们若试图使用其他功能，则很容易迷失在层次结构的菜单中。即 使是有些重要的功能，比如静音，也经常超出了普通使用者的能力。</p>

<p>设计嵌入系统，限制模式的数量，很重要，并且模式的切换最好是可以在情境转换时自然 地进行。比如，手机接收到拨入电话时，要能够切换到电话模式；通话结束后，要能够自动返
    回到以前的模式。如果模式是必需的，则在界面上应该可以被明显地访问到，并且也应提供可 以立即退出的路径。</p>

<p>限定范围</p>

<p>多数嵌入系统都是为特定目的在特定情境下使用的，因此，一定不要把这些专用的系统变 成通用的电脑。可以帮助用户更加有效地做好有限几件事情的设备，会比那些试图处理很多不 相关事情的设备要好得多。</p>

<p>很多设备都会与桌面系统交换数据，所以我们可以这样考虑一下 —— 以桌面系统为中心， 把手持设备作为桌面系统的扩展或者是卫星，在没有桌面系统的场合下，为桌面系统提供关键
    的信息和功能。这样的场景剧本，可以帮助你思考，你设计的卫星系统上，有哪些功能是真正 有用的。</p>

<p>要根据显示器的分辨率来考虑导航</p>

<p>很多设备都受到了显示屏有限面积的制约，这种制约还可能来自于硬件成本、外形尺寸、 便携性或者电力消耗上的要求。设计者必须充分利用有限的显示面积，满足用户的信息需求。
    面积有限的显示屏上的每个像素、每个小区块、每个平方毫米都要充分利用，这对于嵌入系统 的设计是举足轻重的。显示屏的这些限制，通常迫使我们必须要在信息显示的清晰度和导航的
    复杂度上进行取舍，平衡好这两者。虽然通过合理限制功能的数量，可以改善这种难于取舍的 局面，但显示屏和导航的矛盾在一定程度上是始终存在着的。</p>

<p>我们必须要精细规划出嵌入系统的显示屏，开发出信息的构架。还要决定下来最重要的信息 有哪些，最重要的功能有哪些。然后，再看显示屏上是否还有剩余空间可以容纳一些辅助信息。
    在不同信息集合之间切换时，要避免屏幕的闪烁。比如，数字控制烤箱需要告诉使用者当前温度 和设定的目标温度还差几度，可能会让这两个数字来回闪动。这种设计容易导致数字的混淆，使
    用者会搞不清楚哪个是哪个。当前温度和目标温度的差值的显示，有一个较好的方法一在目标 温度旁边加上一个条状柱图，用来显示烤箱内当前温度距离目标温度还差多少。另外，你必须
    还要在显示屏上为物理控制留出显示状态的位置，或者用一个更好的方法，直接在物理控制上 显示它们自己的状态，比如硬件按键内嵌有指示灯，或者硬件本身可以保持并标示出一定的物</p>

<p align="right" height="9pt" width="0pt">461</p>

<p>About Face 4 :交互设计精髓</p>

<p>理状态（例如切换器、开关、滑块、旋钮）。</p>

<blockquote>
    尽可能简化将输入
</blockquote>
<p>几乎所有嵌入系统的输入设备，都要比键盘或桌面类的鼠标设备简陋。这就意味着这些系 统的输入，尤其是文本的输入，对用户来说是非常笨拙的、缓慢的和困难的。即使是最精巧的 一些输入系统，比如触摸屏、语音识别、手写识别或者是拇指板（
    thumbboards ),比起全尺寸 键盘和鼠标来，还是笨拙得多。因此，输入量要尽可能的少，输入过程要尽可能的简单。</p>

<p>尽管信息台设备的屏幕较大，我们仍然要避免复杂的文本输入。首选的输入方法应该是非 接触式的，例如语音输入、接近开关 （proximity switch) 、非接触式手势输入方法等。如果这些
    首选的输入法无法满足输入需求，则在触摸屏足够大的前提下，可以显示软键盘。软键盘上的 每个按键要足够大，以减少按错键的可能。触摸屏还要避免使用普通桌面系统上常见的拖放操
    作，特别是对于新手用户来说，在这种临时试用一下的触摸屏设备上，单击操作还是相对比较 容易和明显的（前提是要有明显适当的能供性（ affordance ))。</p>

<p><span id="filepos0002451774"></span></p>

<p>为专用手持设备而设计</p>

<p>在设计专用的手持设备时（也就是需要同时设计硬件和软件的形态和界面设计时），我们要 额外地考虑并记住如下几点：</p>

<blockquote>
    • 要考虑人们会怎样持握和携带该设备。此时，我们非常有必要制作一个物理模型，它 可以帮助我们了解该设备如何被持握和携带。这样的物理模型至少要能够反映出该设 备的真实尺寸、形状、部件连接形式（比如翻盖等），重量最好也要和真实产品类似。
    这些模型可以被设计者用于情境和关键路线场景剧本中，来验证所设计设备的外形和 形式。根据设备的使用地点和使用时间的不同，按键上的标签会具有比较特殊的情境 需求。比如，追踪快递包裹使用的手持机，一般来说不需用有背光的按键标签，而手
    机和电视机遥控器往往是需要的。
</blockquote>
<blockquote>
    • 尽早决定设备是单手操作还是双手操作的。同样，我们可以运用场景剧本来搞清楚在 不同情境下哪些模式可被用户接受。对于主要是单手操作的设备，也可以考虑加入一 些需要双手但仅仅是偶尔用一下的高级功能。
</blockquote>
<blockquote>
    • 避免使用多个窗口或者弹出窗口。在较小的、低分辨率的屏幕上，基本上没有空间容 纳悬浮窗口。基于此，它们的界面应该采用独占姿态，完全占据屏幕空间。非模态的 对话框，无论如何也要避免使用；模态对话框和错误警告，如果可能的话，也应该采
    用在第 15 章中讨论的一些技术来取代它们。
</blockquote>
<p align="right" height="0pt" width="0pt">第 19 章为移动设备和其他设备而设计</p>

<p><span id="filepos0002454461"></span></p>

<p>为信息台而设计</p>

<p>表面看起来，信息台似乎和桌面系统在界面上有很多类似的地方：显示屏较大并且是彩色 的，内部都有十分强劲的处理器。但是在用户交互方面，这两者之间类似的地方很少。信息台
    的使用者，和独占桌面应用的用户相比，是最典型的非频繁使用者，而且绝大多数情况下，每 次遇到的信息台，他们最多只使用一次。而且，信息台使用者要么在使用前已经有了具体的目
    标，要么完全没有明确的目标。信息台通常不提供键盘或者鼠标设备，即使有这些输入设备，人 们使用起来也不是非常顺手。最后，信息台通常都处在公共场所，充斥着噪音和干扰，使用者身
    后可能还站着一个人在等待。这些环境上的问题和信息台的设计息息相关（如图 19-41 所示)。</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00140.jpg"/></p>

<p><font size="2">图</font> 19~41 <font size="2">在洛杉肌的丄</font> Getty <font size="2">中心和</font> Getty <font size="2">博物馆里面放置的一台</font>
    GettyGuide <font size="2">信息台系统，由</font> Cooper <font size="2">、</font> Getty <font size="2">和</font> Triplecode
    <font size="2">这三个组织协同设计。</font></p>

<p><br/>
    <br/></p>

<p>交易型 VS 探索型</p>

<p>信息台一般分成两类：交易型信息台和探索型信息台。交易型信息台，一般提供限定范围 的交易或者服务，比如银行的自动取款机，机场、火车站、汽车站、电影院的售票机等。自动
    加油机和自动贩卖机等，也可以被认为是一种简单的交易型信息台。交易型信息台的用户们， 心中具有明确而具体的目标：取现金、买票、买巧克力棒或者获取某个具体的信息。这些用户对
    其他目标不感兴趣，只关心他们早已明确的目标是否能以最快的速度以最无痛的方式完成。</p>

<p align="right" height="6pt" width="0pt">探索型信息台最常出现在溥物馆和展览馆。教育和娱乐类的信息台，通常并不会吸引参观
    者的注意，但它们提供了一些辅助信息，为参观者带来更为丰富的体验（不过有些博物馆和展</p>

<p align="right" height="2em" width="0pt">463<br/>
    <br/></p>

<p>About Face 4 :交互设计精涵</p>

<p>览馆例外，比如西雅图的音乐体验项目展览，其中摆放的信息台本身就是展品）。探索型信息台 和交易型信息台的用户体验有所不同。用户在使用探索型信息台之前，对它们的期待通常是开
    放式的。他们可能对信息台产生了好奇心，想娱乐或消遣一下，此时他们并没有明确的使用目 的。（或者，他们想要找到附近的咖啡厅或最近的洗手间，这可能成为开放式体验之外的具体目
    标。）对于探索型信息台，其探索的行为必须要吸引住使用者。因此，其界面不仅要醒目和清晰 , 还要易于导航，更重要的是美学上要能让使用者产生出愉悦感，视觉和听觉上要让使用者兴奋，
    每个页面都能够激发出使用者的兴趣，鼓励他们进一步探索系统中的其他内容。</p>

<p>在公共场合下的交互</p>

<p>交易型信息台无须故意去吸引使用者，这是一条原则。然而，它们的位置应该放在显眼的 地方，并且应该可以很好地照顾使用者的来去。为了便于人们找到它们，可以同时在附近安放
    指路标牌或者周边地图等。有些交易型信息台，尤其是自动取款机，还要考虑安全因素：如果 它们所处的位置不太安全，使用者可能根本就不会使用或者使用时可能会有危险。在规划交互 设计和工业设计的同时，我们还应该进行建筑学上的规划。</p>

<p>和交易型信息台一样，探索型信息台的放置也要小心仔细，同时要安放一些指路标牌或者 周边地图。它们既不能离景物或者展品太近以避免阻挡，也不能离得太远——这样人们才知道
    它们与景物或展品是有关系的。必须要有足够的空间让人们聚拢在一起：探索型信息台经常是 几个人一起在用（比如一家人 ) 。在同一个地点放置几个信息台才合适呢？这是一个比较特殊的
    问题，对于交易型信息台，很多公司会在暗访地点做人流调查，以确定最佳的数字。人们不会 在交易型信息台前逗留过长时间，他们通常也不太讨厌排成队等待使用，因为他们脑子里都有
    明确的目标。探索型信息台则不太一样，它们鼓励长时间的逗留，这就不能吸引旁观者了。由 于潜在使用者对于探索型信息台的内容有较少期待，因此他们没有足够的动机排队等待使用，
    因此可以认为多数人只有在探索型信息台空着的时候才会走上前去。</p>

<p>此外，设计信息台界面时，还要注意声音的使用。由于探索型信息台与生俱来就要吸引人 注意，因此可以使用丰富的声音反馈和音频内容，但音量要适度。在交易型信息台上，要谨慎
    运用声音反馈，只有特殊情况下才应考虑使用。例如，在自动取款机上，当使用者完成交易后， 可以用声音提醒收好银行卡，或者自动贩卖机用声音提醒收好购物后的找零。</p>

<p>同样，由于信息台都位于公共场所中，因此设计的时候也要考虑各种能力人士的需要，这 一点很重要。关于无障碍（ accessibility) 设计的更多讨论，可以参见第 16 章。</p>

<p>最后，上面提到过，公共物品容易变脏，且容易传染疾病。因此，在满足用户达成目标的 前提下，我们应尽量把信息台做成非接触式的。</p>

<p>464</p>

<p align="right" height="0pt" width="0pt">第 19 章为移动设备和其他设备而设计</p>

<p>管理输入</p>

<p>绝大多数的信息台系统，都釆用了触摸屏，或者不用触摸屏，而用硬件按键和小键盘来对 应屏幕上的对象和功能。</p>

<p>对于使用触摸屏的信息台，和其他触摸屏系统一样，要注意下列原则：</p>

<blockquote>
    • 确保单击对象足够大。单击对象只有足够大，才便于手指的操作，对比度要高、色彩 要鲜明，屏幕上各个对象之间不要太近，以防不小心的误操作。对象通常不得少于 20
    毫米，这是使用者在不慌不忙并且是靠近屏幕使用的情况下设定的。如果使用者距离 触摸屏有一臂的距离，或者是匆忙间使用的时候，就要适当地增加对象的大小。这里有 一个相对原始的方法可以用来检查点击对象的尺寸是否足够大：先把屏幕按照实际尺寸
    大小打印出来，在手指尖上蘸上墨水，然后在不同情境下用真实的速度试验，单击对 象，如果你发现有指印触到或者超出了单击对象的边缘，那就得增加对象的尺寸了。
</blockquote>
<blockquote>
    • 保守使用软键盘输入。在触摸屏上使用屏幕上显示出来的软键盘来输入数据，似乎很 不错。不过，这种方法仅仅适合输入很少量的文字，这不仅是因为该输入法难于使用， 而且通常会在屏幕上留下重重的指纹。
</blockquote>
<blockquote>
    • 避免使用拖放操作。在触摸屏上很难掌握拖放操作（ drag-and-drop ),因此信息台的使 用者基本上从来不会花费时间在触摸屏上去学习和练习这种操作。另外，滚动操作也 尽可能不要使用，除非是非常必要。
</blockquote>
<p>有些信息台用硬按键来对应屏幕上的功能和对象，以此取代触摸屏。正如手持系统，这里 也要特别注意这种对应的一致性，在每一屏显示中，类似的功能要对应相同的按键。这些按键
    也不能离触摸屏太远，或者过于分离，因为这样可能会导致对应关系不够清楚（参见第 12 章中 详细讨论的对应关系问题）。一般来说，如果可以使用触摸屏，则强烈建议不要使用硬按键。</p>

<p><span id="filepos0002465993"></span></p>

<p>为十英尺界面设计</p>

<p>基于电视机的界面（有时也称之为 “ 十英尺界面 ” ，译注：中国有时也称为 3 米界面），比 如 TiVo, 以及其他的有线电视或者卫星电视的机顶盒。用户同这些机顶盒的交互，是通过遥控
    器来进行的，用户一般是坐在屋子里，手握遥控器来操作电视。除非遥控器是射频的（通常都 是单向红外的），用户必须要手持遥控器对着电视和机顶盒的方向。在系统导航和操作控制中， 上述这些情况都是有效地进行信息显示设计的难点和约束。</p>

<p>此外，列表、网格、轮显、泳道等设计也可以很好地同这些十英尺界面对应起来，因为遥 控器上有 “D 型板 ” 导航设备，即包含了上下左右四个键的硬件控件。这对于 Netflix 这样的服 务商来说，是个特别好的消息，因为 Netflix
    服务同时通过移动终端和机顶盒来提供，所以列表、</p>

<p>About Face 4 :交互设计精髓</p>

<p>网格、轮显、泳道等界面，只需要稍加调整就能适用于不同的平台了。和我们前面第 17 章讨论 的一样，微软 Metro 设计语言也成功地跨越了不同的平台：桌面、移动设备、机顶盒等。</p>

<blockquote>
    下面是一些有关十英尺界面设计的注意事项：
</blockquote>
<blockquote>
    • 屏幕的布局和视觉设计要清楚，即使人在房间中较远的位置上也可以轻松看到。即使 是高清晰电视（ HDTV), 人同电视之间的距离也不会特别的近（至少，不会比人与计
    算机显示器的距离还近）。这就意味着文本和其他导航对象的尺寸必须要大，因此，这 也基本上决定了屏幕上信息的组织。
</blockquote>
<blockquote>
    • 屏幕上的导航要简单。人们不会把电视看做计算机，遥控器的导航方式也是有限的， 因此，我们最好充分利用五向遥控器（上下左右中），将它同电视的导航对应起来。尽 管在交互方式上还有创新的空间，例如采用滚轮或者其他输入方式，但是这些新型的
    交互方式一定要和其他的电视及机顶盒设备的遥控器兼容（参见下一段的讨论），因此 要仔细规划设计方案。另外，我们也可以采用一些视觉的道路导向技术，比如将不同 的功能区进行颜色编码显示，在每一屏上为导航和命令选项提供视觉或者文本提示，
    这些都有利于增强易用性。在这一点上， TiVo 做得非常好。
</blockquote>
<blockquote>
    • 始终牢记控制集成。很多人都很讨厌必须要用好几个遥控器来操控与电视相连接的娱 乐系统。把其他家庭娱乐设备的常见功能的控制集成到你正在设计的这个遥控器上(配
    置越简单越好），你会发现你满足了很多人的需求。这就意味着某个产品的遥控器或者 控制台需要知道其他设备的操作命令，也需要了解和跟踪其他设备的操作状态。逻技 公司（ Logitech) 的 Harmony
    系列万能遥控器可以做到上述这几点，可以把这种遥控 器通过 USB 连接到电脑上进行配置。
</blockquote>
<blockquote>
    • 遥控要尽可能简单。很多人都发现复杂的遥控器让人退缩，家庭娱乐系统的遥控器上 的大多数功能极少被用到。尤其是那些万能遥控器，通常都有四五十个按钮，有的超 过了 60 个按钮。
</blockquote>
<blockquote>
    • 缓解这种问题的一个解决方法是在遥控器上加一个小显示屏，这样可以根据具体情境 来显示相应的控制，也可少用一些按钮。这些控制可以通过触摸屏来实现，或者屏幕 旁的软键。这两种方法有各自的缺点：很多触摸屏都没有触感反馈，这样用户必须要抬
    头看电视屏幕才知道刚才的触摸动作是否正确。软键没有触感反馈的问题，却在遥控器 上添加了更多的按键。遥控器加上了这个小显示屏，也会引诱设计者在显示屏上设计出
    可以导航的多页面内容或者控件。尽管有一些成功的例子，但是任何具有两个显示屏（电 视屏和遥控器上的小显示屏）的设计方案都可能分散用户注意力，这具有一定的风险， 用户可能会被搞得迷惑不解，并产生厌烦情绪。
</blockquote>
<blockquote>
    • 重点要放在用户的目标和活动，而不是产品的功能。多数的家庭娱乐系统需要用户了 解系统的拓扑和状态，之后才能有效地使用：比如，看电影，使用者需要知道如何打
</blockquote>
<p>466</p>

<p align="right" height="0pt" width="0pt">第 19 章为移动设备和其他设备而设计</p>

<blockquote>
    开电视，如何打开 DVD 播放机，还要知道如果把 DVD 机连接到电视上，把电视的输 入选择为 DVD 机，如何打开环绕立体声，如何把电视设置为宽屏模式。要干这些事
    情，可能需要三个遥控器，或者在一个万能遥控器上按六次以上的按钮。逻技公司的 Harmony 遥控器采取用了一种不同的方法：围绕着用户活动来组织控制（比如“看电 影 ”
    活动），按用户自己对设备连接的了解（在安装阶段），以及对设备层命令执行顺 序的了解，进行设计。尽管这种方法使得开发过程很复杂，但如果能设计得当，对于 用户显然就是成功的。
</blockquote>
<p><span id="filepos0002474769"></span></p>

<p>为汽车界面设计</p>

<p>汽车界面，尤其是那些带有复杂导航和娱乐功能的，（在汽车行业被称为“远程信息处理一 telematics” ）在驾驶员安全保障方面都有着特殊的问题。复杂的或令人费解的交互需要占用驾
    驶员过多的注意力，因此可能会让路上行驶中的驾驶员处于危险的境地。因此，要避免这些问 题，成功地开发出这些系统，离不开大量的设计工作以及可用性验证。在仪表盘、中心控制台 和方向盘等空间相对有限的情况下，这是一个非常特殊的挑战。</p>

<blockquote>
    • 手离开方向盘的时间要尽可能短。常用的导航控制（例如播放、暂停、静音、跳过、 扫描等）应该直接放在方向盘上（供驾驶员使用），以及中心控制台上（供乘客使用）。
</blockquote>
<blockquote>
    • 从一个屏幕到下一个屏幕的显示布局要一致。保持布局的一致，这样驾驶员才能保持 不同情境下的一致的方向感和关系。
</blockquote>
<blockquote>
    • 尽可能地运用直接控制对应关系。上面硬件控件上直接带有标签，比硬件控件旁边放 置一个软键要好。触摸屏按钮如果能有直接的触感反馈，也比软键对应临近硬按键的 控制方式好。其中的道理是一样的，操作该系统的驾驶员只需要较少的认知循环就可
    以理解对应关系。
</blockquote>
<blockquote>
    • 小心选择输入方式。对于驾驶员来说，使用旋把或者旋钮比一组按钮要容易得多。较 少的控制可以避免搞乱界面，另外旋把也较为突出，比较容易触及，并且如果设计得 当的话，还能以一种优雅和直观的方式来进行粗调和细调控制。
</blockquote>
<blockquote>
    • 硬件控件的物理外形的区别，要尽可能的大，这样触摸起来就知道是什么。
</blockquote>
<blockquote>
    • 显示屏在视觉设计上的对比度很强烈，视觉层次要非常浅，这样一眼看过去就能抓到 所有信息。
</blockquote>
<blockquote>
    • 模式和情境的转换要简单并且易于理解。在宝马汽车中的 iDrive 系统里，汽车娱乐、 车内气候控制、导航等系统都可以通过一个旋把和摇杆的组合控制系统来操作。这个
    方式的初衷是想让事情简单，但如此极端的做法让控制不堪重负，要使用这个宝马的 控制系统，用户必须要首先在界面上浏览，才能切换模式或者情境。模式（例如 CD
</blockquote>
<p align="right" height="2em" width="0pt">467</p>

<p>About Face 4 :交互设计精髓</p>

<blockquote>
    模式、 FM 模式、气候模式、导航模式等）的访问应该是直接的，应该是单个触摸或 者按键动作就可以完成的，并且这些模式键的位置也应该是固定的，在不同界面中应 该是一致的。
</blockquote>
<blockquote>
    • 提供声音反馈。驾驶员如果可以听得到命令确认，其视线便无须离开前方的道路。不 过，要注意音量的大小，确保反馈的音量不能太大或者产生干扰。对于车载导航系统， 语音反馈提示驾驶方向是很有帮助的，前提是这个语音提示要足够早。语音输入也是
    很有帮助的，驾驶员说话就可以操作界面。不过，由于汽车环境中噪音可能会很大， 有的时候很难识别语音命令，有时候需要重复或者更正，这就没有按键来得准确。语 音输入是很好的市场营销点，但我们认为，判断这种技术的优劣，还是要看是否提升
    了驾驶员的用户体验和安全。
</blockquote>
<p><span id="filepos0002480530"></span></p>

<p>为语音界面设计</p>

<p>语音界面，比如语音留言系统、自动呼叫中心等，具有不同的特点和特殊情况。导航问题 是最具挑战性的，因为在一个没有任何视觉信息的功能层次树中很容易迷失方向，设计较差的
    电话树交互系统也常常有损企业的品牌形象。（几乎所有的语音界面都是树形结构，虽然语音识 别技术可以突破树形结构，但这会带来另一类问题。）</p>

<blockquote>
    以下是我们在设计可用的语音界面时需要注意的一些基本原则：
</blockquote>
<blockquote>
    • 按照用户的心理模型来组织和命名功能，在任何设计中都很重要，但在所有功能都是 用语音来描述的系统中更加重要，因为此时唯一的情境就是现在所处的功能。语音界 面一定经过完整的情境剧本的验证，从而决定出最重要的功能，让这些功能最容易被
    访问到。这意味着要把最常用的选项放在最前面。
</blockquote>
<blockquote>
    • 一定要明示出当前可选的功能。用户进行完每次操作后，系统都应该说出现在可以进 行的功能，以及如何调用这些功能。
</blockquote>
<blockquote>
    • 任何时候都可以返回到上一步和最高一级。每次操作完成之后，语音界面应该告诉用 户如何返回到功能结构的上一步（一般是树形结构的上一个节点），以及如何返回到功 能树的最高一级。
</blockquote>
<blockquote>
    • 任何时候都可以转到人工接听电话。如果可以，则每次操作完成后，系统都应该给出 如何转到人工服务的方法，尤其是在用户遇到困难时。
</blockquote>
<blockquote>
    • 给用户足够的时间来响应。系统通常需要的是键盘输入信息或者语音输入信息。可以 通过测试来决定等待时间的长短；要记住，用电话的小键盘来输入文字信息，是又慢 又不方便的。
</blockquote>
<p><font size="7">第20章</font></p>

<p align="right" height="1pt" width="0pt"><font size="7">网页的设计</font></p>

<blockquote>
    万维网 （World Wide Web) 对于交互设计者来说，既好处也有坏处。基本 上，自从发明了图形用户界面（ GUI) 开始，企业的决策者们就开始理解并采纳 用户中心设计（ UCD) 的语言。接着， “
    用户体验”一词在企业高管中间广泛 流行起来，成为了时尚。可是另一方面，网页在历史演变中，在交互方面产生 出了诸多限制和招峨，让交互设计倒退了近十年。
</blockquote>
<blockquote>
    本书第一版在 1995 年 8 月出版的时候，网页这个新生事物，才刚刚植根于 学术和科学领域。彼时的网页，也仅仅是一种发布和阅读文本的有效方式，文 本中有时会夹杂一些超级链接和图片（表格元素在几个月后随着 HTML 2.0 的发
    布被引入）。本书第二版出版的时候，消费类和企业网站（它们刚刚经历了互 联网的冬天并生存了下来），包括公司内部网，开始出现，但交互模式仍然非 常有限。传统的数据输入和导航方式依然在广泛使用，但多年下来它们还是十
    分简陋的，几乎没有出现过新的东西，更没有奇迹的发生。
</blockquote>
<blockquote>
    接下来的几年，互联网进入到了爆发式增长阶段，人人都看好网页的前景。 大批的人们涌入这一行业，包括从设计学校新毕业的大学生、传统的美术设计 者，以及一些对网站激动不已并认为有利可图的充满热情的年轻人，他们试图
    用这种新的交互视觉表达形式，来创造吸引人的交流方式（和商业模式）。试 图用网页这种局限性很大的媒介，加上仅仅具备初级水平的交互和视觉设计产 业，来制作出优良的用户体验，这是当时最大的问题。
</blockquote>
<blockquote>
    不过，事情出现了转机。在 2007 年本书第三版发布时，出现了较为强大的 网页技术，被广泛使用。诸如 HTML5 、 CSS3 、 AJAX 等技术的兴起，使得“富 互联网应用 ”（rich Internet
    applications, R1A) 流行起来。这令 UI 能力得到很
</blockquote>
<blockquote>
    大的提升，出现了新型的交互方式，例如 “ 拖放 ” 操作、将数据流集成到 UI 元 素中，以及更多更强的屏幕结构。基于浏览器的 UI ，甚至可以比肩桌面应用。 不过，微软 .NET 应用依然占据着桌面软件的主流。
</blockquote>
<blockquote>
    469
</blockquote>
<p>当我们在 2014 年发布本书的第四版时，局面彻底发生了变化。随着 GitHub 的兴起，开源 运动创造了非常强大、极为复杂的 HTML5 的 UI 部件，它们在功能和可操作性方面都很卓越(例 如 Bootstrap 和 jQuery
    生态系统）。另外，得益于一些诸如谷歌和苹果等公司在这方面的投资， 网页浏览器在快速渲染和处理 HTML 和 JavaScript 方面得到了迅猛的发展，变得极为有效，网 页底层的部件也得到了高度发展。</p>

<p>在网页上实现 “ 软件式的体验 ” 有着很多好处。它使得开发可以持续，从而可以让改善不 断持续。基于网络的应用，更加适合我们社会化的生活和工作。这样，更加暂态的、放牧吃草
    式的使用方式，成为了可能。人们想用任何功能或服务时，也不必为安装软件和不断的升级软 件而操心。</p>

<p>这些变化最后形成一种新的局面，设计师现在可以发挥想象，在网页浏览器中做任何以往 只有软件才可以做的事情。今天，需要安装在电脑本地的软件越来越少，似乎只剩下了那些非 常复杂的创作类的软件（例如图形设计、 3D
    建模、视频编辑、表现设计、程序编码等 ) 。并且 , 现在，网页已经成为了人与人之间，以及企业与客户之间的最重要、最流行的沟通渠道。</p>

<p>这意味着网页体验的质量是无比重要的，随着越来越多、越来越复杂的软件行为转移到网 页上，网页的交互能力也必须要达到和软件相当的水平。在以往，视觉设计师关注“视觉和感 觉 ” ，信息构架师关注内容结构。 '
    而现在，这些知识和经验对新一代的网页设计师来说，是不够 用的。</p>

<p>现在，在 GitHub 上可以很容易浏览并找到现成编码的 UI 部件，其中一些具备良好的交互 设计特征（例如具体丰富的非模态化视觉反馈）。不过，即使手边有这些大量的现成部件，我们
    也仍然无法很好地回答一些既重要又简单的问题：我们怎样做才能恰如其分地满足用户的需求 和想法，如何才能利用好这些部件，开发出具备良好和连贯用户体验的产品。</p>

<p>很多年来，我们很难总结出一个针对网页的、完善的用户体验设计指南，因为这个话题实 在是太大了。同一浏览器上的不同标签窗格中，可能就存在着大量的不同类型的网站，有媒体 类的、企业软件类的、电子商务类的，还有社交网络类的网站等。</p>

<p>虽然用户对不同的网站可以有不同的期待，但他们还得依赖于约定俗成的习惯用法，去用 这些网站和应用，特别是那些第一次或偶尔访问和使用的网站。尽管这些约定俗成的习惯用法 也在发展，但交互的基础媒介物 @
    并没有发生变化。这些媒介物是非常重要的，交互设计师在 创造浏览器使用体验时，必须要考虑这些问题。</p>

<p>①译注：例如鼠标、键盘、屏幕等。</p>

<p>470</p>

<p align="right" height="0pt" width="0pt">第 20 章网页的设计</p>

<p>本章将讨论待考虑问题中最重要的那些。必须要指出，网页设计是一个涌现大量思想的领 域，我们的同行们做过很多的工作，其中最值得向大家推荐的有 ：Steve Krug 的 “Don’ tmake me think,
    revisited”（New Riders ， 2014)，Louis Rosenfeld 和 Peter Morville 的 “Information Architecture for the World Wide Web” （
    0, Reilly ， 2006) 。这些书详细、清晰地讨论了网页设计</p>

<p>的必要元素。另外，一个名为 “ A List Apart” 的网站上，有不少优质资源，只是它略微偏重技 术层面。</p>

<p><span id="filepos0002495731"></span></p>

<p><font size="6">基于页面的交互</font></p>

<p>网页（ Web) 作为一种媒介物，它最基础的特征受到了 “ 页面 ” （ <font size="2">page)</font> 这一概念的影响。 页面，从它进入到网页领域的第一天起，所有的技术都是围绕着它的。用于网页的 Ajax 和
    MVC 框架，可以让页面结构和页面之间的关系变得多姿多彩。大量的关于设计网页体验的重要习惯 用法和指南原则，都和页面概念紧密相连。</p>

<p>那些同时兼顾本地应用软件（桌面软件和移动软件）和网页软件的设计师们，一定要牢记 他们当前设计项目所面对的媒介物是什么，并从媒介物出发来考虑事情。本地应用软件通常是 构架在 “ 屏幕 ” 或 “ 视图 ” （ screen 或
    view) 之上的。虽然，它们看起来和页面差不了多少，但 和页面还是有很大的不同，而且是很重要的不同，特别是在构建体验的两种方式上。下面我们 来谈谈这两种方式。</p>

<p><span id="filepos0002497729"></span></p>

<p>导航和寻路</p>

<p>首先要谈的，也是最重要的，是导航方式的不同。虽然本地应用也需要在不同视图间进行 导航，但比起网页应用，本地应用的导航量并不算大。通常来说，即便是最普通的网页应用，
    也比本地应用的导航量大得多。这是因为在本地应用中，用户所处的空间数量和模态数量是有 限的，不会太多，而且当用户进入到某个空间或模态时，有关内容就会呈现出来。而网页就不 同了，它的每一条内容通常都在其各自的空间里（或者 URL
    里），设计网页的难点是如何帮助 用户在页面上找到他们所需的内容。</p>

<p>这个话题把我们带入到了信息构架的领域。在商用网页的早期，人们在设计和构建网站时， 意识到了一个新的设计难题 —— 如何才能更好地支持包含无数超链接的大量网页——这其实是
    一个如何在多个页面间有效地组织和构架内容的问题。于是，一个新的设计工作岗位诞生了 —— 信息构架师，他们开发出了一系列的原则和实践，用来解决逻辑结构和内容流等非视觉方面的 设计问题。</p>

<blockquote>
    471<br/>
    <br/>
</blockquote>
<p>本书并不打算深度探讨信息构架方面的话题，但这个现象——网页体验通常是构架在无数 个不同的、有着各种逻辑关系的页面上的 —— 同时也给了交互设计师一个难题，即如何创造出 有效的导航交互。</p>

<p>一级导航</p>

<p>在商用网页的早期阶段， “ 一级导航 ”（primary navigation) — 词就已经开始使用了，它指 的是用户如何到达网站或应用的主要区域或位置。曾经一度，几乎所有的网站和应用，都会在 顶端或左边放置 “ 永久链接
    ”（persistent link )。</p>

<p>多数情况下，将一级导航信息置于顶端（参见图 20-1) ，是一种较好的导航方式，我们称 之为顶端导航 （top navigation) 。侧边导航，即将一级导航信息置于侧边，则会占据页面的视觉
    进入点，让页面显得拥挤，用户在阅读内容时会被迫扫描到它。顶端导航的最大局限是，能够 放入其中的条目有限，因为导航栏的长度是有限的。不过，这个局限性也是它最大的好处，设
    计者必须想法减少主区域的数量，尽量缩短页面主题、并且让它简洁有力，这样通常会产生出 易于理解、又十分好用的东西来。</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00002.jpg"/></p>

<p align="right" height="0pt" width="0pt"><font size="2">图</font> <font size="2">20-1 Basecamp</font> <font size="2">网站上的一级导航就位于顶端，这是一级导航最常出现的位置。上面的黑色栏上，显示着它提供的</font>
</p>

<p align="center" height="1pt" width="0pt"><font size="2">不同应用，用户可以点击切换。位于</font> <font size="2">Basecamp</font> <font
        size="2">图标旁边的导航栏上，则列出了</font> <font size="2">Bascamp</font> <font size="2">网站本身的主区域。</font></p>

<p><br/>
    <br/></p>

<p>作为一条原则，一级导航置顶，也有例外情况。如果我们要展示的内容种类非常多，则顶 端导航栏上可能没有足够的空间来盛放所有的种类名称，如果名称过于精简，则可能变得太抽
    象，用户可能又看不懂。此时，左侧边导航便有了用武之地，它适合展示内容种类很多的情况， 可以非常多。并且由于内容的名称被放到了左侧，因此它们可以采用左对齐的方式，从而便于
    阅读。亚马逊网站以擅长使用解析法来优化网页设计著称，销售着无数各式各样的产品，在某 些页面上就采用了左侧边导航来进行产品分类。不过，除了主页外，其他页面上的导航栏都被 隐藏起来，只有当用户鼠标悬停在 “ 按部门来显不 ”（Show
    By Department) 上方时，导航栏才 会被显示出来（图 20-2 )。</p>

<p>刚刚谈到了一个有关网页设计的重要话题：即使用户正在某一个页面上的时候，也可以按 照用户在系统中所处的位置来动态地控制导航的隐藏和显示，不一定彻底隐藏或始终显示。不
    过，导航栏始终置顶（用户上下滚动屏幕时也如此）的这种方式，被用得越来越多，且获得了 成功。品牌信息和其他元素被尽可能地缩小，这样一来该栏目所占的屏幕空间可以更小，而且
    当用户关注导航栏下面的内容区域时，较小的导航栏产生的视觉干扰也较小（图 20-3 )。</p>

<p>472</p>

<p><img align="baseline" alt="" height="216" src="../Images/Image00326.jpg" width="132"/></p>

<p><img align="baseline" alt="" height="52" src="../Images/Image00231.jpg" width="79"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00181.jpg"/></p>

<p>第 20 章网页的设计</p>

<p>amazon</p>

<p><font size="1">limited Instant Videos</font></p>

<p>MP5sA <font size="2">〇</font> ow}Pl«y«f 30 m»o»</p>

<p><font size="1"><i>Atmzon</i></font> <font size="1">Ooud 〇rtv«</font> <font size="1"><i>Ap0%t〇f</i></font> <font
        size="1">for Android</font> <font size="1">Ow*tt»«crtN«»3#y K«vdKi E^fMdm 4 Book#</font></p>

<p>Am«ort <font size="1"><i>fim</i></font> TV</p>

<p>&lt;</p>

<p>A Gift Mom Will Lc</p>

<p>kindle ^69- ^49</p>

<blockquote>
    <font size="1">Wth Wi</font> 系 <font size="1">99 ,</font> <font size="1">MovMw, Mt«Uc &amp;</font> <i>Omm</i>
    £)ectrorvics &amp; Comput«m Hom^ <font size="1">恭</font> Teo*»
</blockquote>
<p>9*auty. &amp; Orocwy</p>

<p>Toyn. Kida &amp; Satoy</p>

<p align="right" height="0pt" width="0pt">nfii. Shoe® &amp; J«w»lry</p>

<p>&lt;</p>

<p><font size="1">Pull Storti Owftctofy</font></p>

<p>Related to fSems Y <font size="2">OM</font> V <font size="2">©</font> Vmwed</p>

<p height="0pt" width="0pt"><font size="5">MENTS</font></p>

<p>SLIPON3</p>

<blockquote align="center" height="0pt" width="0pt">
    <font size="1">uol corws p«cb from S«&lt;jye«£ o</font>
</blockquote>

<p>amazon</p>

<p><font size="1">没</font> ) <font size="1">〇</font> pt&gt;y Oepartmnt •</p>

<p>Books A&lt;lvsn <font size="1">〇</font> »dS4</p>

<p><font size="1">wRMssm 8©«5 a^ing</font> <i>A^out f^ce</i> tookinskie^</p>

<p>s^iauaM <font size="1">搬細賴:虞脚</font></p>

<p align="right" height="0pt" width="0pt"><font size="1">77»e</font> <i>Bssemiats of Interaction Design</i></p>

<p align="right" height="3pt" width="0pt">R row <font size="1">祕八</font> I * _</p>

<p><font size="2">Programming Books</font> G <font size="2">I</font> Js About Face 3: The Essentials y <i>t</i></p>

<p align="center" height="0pt" width="0pt">w (mutoosaexiiisss)</p>

<blockquote>
    »g_ U*&lt; Prtw • **MC w <font size="1">略</font> _ I—: <font size="1"><i>im Pr\w</i></font> <i>：</i> $4M©
</blockquote>

<p>YttttSuv <font size="1">#；</font> im86&lt;41%) <font size="1">• 64i</font> <font size="1"><i>i</i></font> <font
        size="1">丨</font> <i>Pmmftt</i></p>

<p>辦州 <font size="1">e</font> *，</p>

<p align="right" height="0pt" width="0pt">aat ygur Kindlft htfg.</p>

<p><i>'S^KrvM</i></p>

<p><i>腿</i></p>

<p><font size="1">Book</font> <i>Dewripti^m</i></p>

<p><font size="1">P&gt;jWlc*«km</font> <i>Omte：</i></p>

<blockquote align="center" height="0pt" width="0pt">
    <font size="1">TW^</font> <i>Comp^i</i>
</blockquote>

<blockquote>
    <font size="5">B</font> Shop th« ww# k« <font size="1">办</font> 4»o <font size="1">蝌扒</font> o <font
        size="1">缚）</font> <i>Hcwt</i> A^mi^itraa^, TPMi, #rtd other <font size="1"><i>U</i></font> resources. <font
        size="1"><i>^</i></font> <i>〇0</i> titeokft on pfQq；raf <font size="1">r««&lt;5er^ in th« tech w«u*try. &gt;j8MCJ2to</font>
    Mfty I«, 2009
</blockquote>
<p><font size="1">%t«2y update volume pres^ms ^ffectiv# dfKJ practical tool* you</font> <font size="2">图20</font> -
    <font size="2">2亚马逊采用了侧边导航，用户访问首页时就可以看到。其他页面上，用户需要鼠标悬停才可以看到。</font></p>

<p>Google+</p>

<p><font size="2">發</font> <font size="2">Commune</font></p>

<p align="right" height="0pt" width="0pt"><font size="1"><i>peopk,</i></font> pages, or posto</p>

<p>H! |P g</p>

<p align="center" height="3pt" width="0pt"><font size="1">&lt;P</font></p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" rowspan="2" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">Design Adventure Club of Adventure</font></p>

            <p align="center" height="0pt" width="0pt">&nbsp; <font size="1">Our fStily</font> <font size="1"><i>gtovd
                itA</i></font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                <font size="1">&nbsp;</font> <font size="1">Shar^wtiat'snew</font>
            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                <font size="1">About this community</font>
            </blockquote>

            <blockquote>
                &nbsp; <font size="1">A</font> <font size="1"><i>piM</i></font> <font size="1">tor ut to tnck «ur «r&gt;^</font>
            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp; <font size="1">你,IWW»</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" rowspan="2" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="center" height="0pt" width="0pt"><font size="1">y Q ^ 〇 □</font></p>

            <blockquote>
                &nbsp; <font size="1">Ttrt f J V雜</font> <font size="1">办細</font>

            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp; <font size="1">i ft</font> <font size="1"><i>maKxwA</i></font> <font size="1">off 0</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p height="0pt" width="0pt"><font size="5">SPIT&nbsp;</font></p>
        </td>

        <td bgcolor="#FFF" colspan="3" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                <font size="1">&nbsp;</font> <font size="1">JP AtMkmCrow</font>

            </blockquote>
        </td>
    </tr>
</table>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p>我们在思考如何设计出最佳的一级导航时，不要忽视了使用移动网页浏览器的众多用户。 如果这些用户对你来说是十分重要的（今天多数情况下确实是十分重要的），那么一定要确保你</p>

<p>473</p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p>About Face 4 :交互设计精髓</p>

<p><img align="baseline" alt="" height="69" src="../Images/Image00221.jpg" width="55"/></p>

<p>的导航方式在较小的屏幕上也能发挥出好的效果。有关移动网页浏览器上的导航设计，这里有 一个常见而且实用的方法，不要将导航栏永久地固定在屏幕上，而是在用户点击某一个菜单时 , 或点击 “ 汉堡包 ”
    控件时（三个摞起来的小横线），才将它调出。</p>

<p>设计原则</p>

<p>采用永久固定的页眉来保持情境</p>

<p>关于 “ 汉堡包 ” 图标，目前还存在着有益的争议。其中一项研究得出的统计数据，很明显 地告诉我们，至少有一些用户认为，直接用 “ 菜单 ” 这两个字，比用 “ 汉堡包”图标的效果要 好。在本章后面的移动网页一节里，我们在图
    20-13 中展示了 Boston Global 网站的手机网页， 采用了更为前卫的一种顶端导航方式，为了迎合手机屏，它干脆将导航栏里的条目数量减少为 一个，只有 “sections” 这一项。</p>

<p>二级导航和更深层级的导航</p>

<p>通常，在应用复杂的信息空间中，只有一级导航是不够的。仅凭一级导航上的几个条目或 链接，用户通常难以找到所需的内容。当然用户也可以搜索，但内容本身通常也是多级的。独
    占式应用的专家级用户，能够记住三层或更深层级的导航路径。但在我们的经验中，如果内容 被埋藏在一个三级结构中，则大多数的中间用户和新手用户在里面找内容的过程，都是十分耗
    时和费力的。尽管搜索技术能缓解这一问题，但最好的方式还是减少层级数量，尽可能压缩导 航空间，让导航空间扁平化，这样才有利于用户形成有关内容组织的心理模型。</p>

<p>有几个简单而实用的方法，可以让二级和更深层次的导航更加有效。首先，我们可以在页 面的左侧放置一个菜单或二级水平导航链接（如果一级导航也是如此的话，就可以采用这种方 式，参见图 20-4 )。</p>

<p>有一种实用的二级导航，叫作 “ 胖导航 ”（fat navigation )。当用户点击一级导航上的项目 时，会扩展显示出一大块选择内容的区域（图 20-5), 这便是胖导航。这种导航效果不错，因
    为它很自然地接续了一级导航的交互。另外，它是模态的，又是临时显示的，因此可以运用大 块的屏幕空间。</p>

<p>为了更好地强化用户的心理模型，当用户处于层级结构中，我们都要将用户的位置信息持 续地反馈给用户。实现这种反馈的常见方式有两种：第一种是在导航元素上提供视觉反馈，第 二种是通过 “ 面包渣 ” 的方式。 “ 面包渣 ”
    是一系列的链接，它直接显示出用户所在层级结构中 的位置（图 20-6 )。</p>

<p>474</p>

<p><img align="baseline" alt="" height="13" src="../Images/Image00372.jpg" width="173"/></p>

<p><img align="baseline" alt="" height="21" src="../Images/Image00239.jpg" width="179"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00096.jpg"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00159.jpg"/></p>

<p>第 20 章网页的设计</p>

<p>Room&amp;Board</p>

<p><font size="1"><i>%tGU INfCmAT^</i></font> ACCOUNT CART {«)</p>

<p><font size="1">flNO A STORE 9m.Se 1.9T20</font></p>

<p>WISH tIST (0)</p>

<p>丨</p>

<p>LtvmG DINING BiOROOM BMTRYWAY KIDS <font size="1">〇</font> md OUTDOOR WINDOWS UGHTING RUGS ACCESSORIES CUSTOM</p>

<p>Office</p>

<p>SHARE THIS ROOM: || €&gt; <font size="1">〇</font> P^&gt; <font size="1">〇</font> m I <font
        size="1"><u>next</u></font> OBSKS $, CHAiM</p>

<p>Qffkm Armmr&amp;s Offlm CWr»</p>

<p><i>CiiStm%</i></p>

<p><font size="1"><i>Herm&amp;n</i></font> Mfiter ST <font size="2">〇</font> RAG€</p>

<p>總 <font size="1">s • SNslv</font> 挪 Cuitom <font size="6"><i>C&amp;himU</i></font></p>

<p><font size="5">丁</font> he corner</p>

<p><font size="2">Handcrafted, American^made furniture combines beauty and functionaNty to tackle any size
    profecfc</font> <font size="1">：</font></p>

<p>office</p>

<p><font size="1">ACC£SS〇a«ES</font> <font size="6"><i>7mk utmfm</i></font> Ofl*5a* <i>〇</i> <font
        size="6"><i>rq»xmni^n</i></font> See &gt; lOf A$ &amp; ADVICC</p>

<p align="right" height="0pt" width="0pt"><font size="1">娜</font> l <font size="1">咖</font> H <font size="1">〇</font> r»
</p>

<p>Chalif G <font size="1">副</font> a</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="13" src="../Images/Image00372.jpg"
                                                width="173"/></p>

<p>See a <font size="1">卩</font> 1 <font size="1">鐺</font> e»s <font size="1">备</font> A«M«e »</p>

<p><font size="2">图</font> 204 “Room&amp;Board” <font size="2">网站采用了经典的左侧导航栏，用于导航网站一级内容之内的网页。</font></p>

<p>Room&amp;Board</p>

<p>SIGN IN/CRf ATi ACCOUNT CART (0) WISH UST (0)</p>

<p>FIND A STOM 900.301 .^n <font size="1">〇</font></p>

<p height="0pt" width="0pt"><font size="5">RUGS ACCESSORIES CUSTOM</font></p>

<p>UVIhMS DINING eiOftOOH ENTRYWAY IOOS <font size="1">〇</font> m«</p>

<p height="0pt" width="0pt"><font size="5">OUTDOOR WINDOWS LIGHTING</font></p>

<p>Office</p>

<p><font size="1">DESKS * CHAINS 0«s»kS</font></p>

<p>e Armoim# e Chtt <font size="1">物 Custom Oe«k6</font></p>

<p><font size="1">Merman _ll费p C扮</font></p>

<p><i>OtnatA</i></p>

<p><i>OffU^C</i></p>

<p>STORAG6</p>

<p><font size="1">Storage</font> R <font size="2">〇</font> rtkc»6«# ft Sh«lv«# Custom Cnb <font size="1">靖</font> t»
    ACC£SSOIIIf$</p>

<p><font size="1">Task Lamps</font> Offk：« <i>〇</i> <font size="6"><i>tq»nipim^</i></font> <font size="1">S#« Acccs#©:^
    &gt;</font> OfRoeC Utarn a</p>

<blockquote align="center" height="0pt" width="0pt">
    <font size="1">IDEAS * ADVICE 8u$id«ts Inteiiors ft</font> <font size="6"><i>Chair</i></font> n about the Arti&amp;a_
    &amp; See •" <font size="1">备</font> »
</blockquote>

<p height="0pt" width="0pt"><font size="5">DESKS A CHAHIS STORAGE</font></p>

<p height="0pt" width="0pt">ACCESSORIES</p>

<p>—r-|^ Offic® <font size="2">A</font></p>

<blockquote>
    I M© C _«c
</blockquote>

<blockquote>
    b Arm <font size="1">〇</font> fr«s <font size="1">« Cn»sr*</font>
</blockquote>

<p><font size="1">Rle Storage</font> 6ookc»se$ &amp; <font size="6"><i>St^wts</i></font> Custom Offk« Organ <font
        size="1">泛</font></p>

<p>T*«k tamps</p>

<p><font size="2">Handcrafted</font> <font size="1">，</font> <font size="2">Ameri&lt; Cwftom</font> <font
        size="1">加咖</font> <font size="2">combines beauty an</font> <font size="1"><i>Htrtt\»n HiMr</i></font> <font
        size="1">to tackle any</font> <font size="1"><i>sa^</i></font> <font size="1">pr</font> IDEAS A AOVtCE</p>

<p><font size="2">图</font> 20-5 <font size="2">在</font> Room&amp;Board <font size="2">网站里，鼠标悬停在一级导航项目上，一个包含了子页面链接的大块内容区域就会弹出，而
    不需要用户先进入到</font> Office <font size="2">区域。</font></p>

<p>475</p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p><img align="baseline" alt="" height="23" src="../Images/Image00205.jpg" width="129"/></p>

<p><img align="baseline" alt="" height="189" src="../Images/Image00151.jpg" width="378"/></p>

<p>Room&amp;Board</p>

<p>$I«W IN/OIIAT8 ACCOUNT CART (0) WIIH UST (0}</p>

<p>HND A $TOR£</p>

<p>UVIN&lt;5 DINING gfOaOOH ENTRYWAY KIDS Offk« &gt; OFHCS OUTDOOR WINDOWS UGHTWG RUGS ACCCSSOIU£$ CUSTOM</p>

<p>Forge</p>

<p>丨 <font size="2">Description «■</font></p>

<blockquote>
    fiaixjls of h*fUJ-w«ldcd 2Vi* inch natural steel support ^ ftoild wood top to give our foi* <font size="2">〇</font>
    « table a desi <font size="2">〇</font> n <font size="6"><i>th&amp;t4s</i></font> open and alry4 yet <font
        size="1">4</font> <i>Situ% KvaUMbie</i>
</blockquote>

<p>THT=0</p>

<p>_____</p>

<p>tu&amp;stantlal enouQh to an€hor a «Jinin <font size="1">9</font> room. Specifically designed to hiQhii <font
        size="1">9</font> ht our so <font size="1">料</font> d wood table tops# the t&gt;aw; feaUircs $wbt <font
        size="1">吣邮</font> W</p>

<p><font size="1">marks th«t give «#ch t»We M&lt;iividual character.</font></p>

<p><font size="2">Details &amp; Dimensions »</font></p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="23" src="../Images/Image00205.jpg"
                                                width="129"/></p>

<blockquote>
    <font size="5">■</font> Request free material card
</blockquote>

<p>Surwrsary</p>

<p>Forge 72x36 Dining Table</p>

<p>Top: Reclaimed chestnut</p>

<p>fMjteLIJto</p>

<p><font size="1">$1,899.00</font></p>

<p>mmmma</p>

<p>Rmimm <font size="1"><u>i街</u></font> i WtM&amp;f&amp;vmff <font size="1"><u>轉纖齡n</u></font></p>

<blockquote>
    Qtyl:;:
</blockquote>

<p>Delivery Cwt</p>

<p><font size="2">图</font> <font size="6">20-6</font> <font size="2">在</font> <font size="6">Room&amp;Board</font> <font
        size="2">网站中的一张桌子。通过</font> <font size="6">“</font> <font size="2">面包渣”，用户可以立即知道自己在网站内容层级结构中的当前
    位置，而且还可以返回到任意上层层级中。</font></p>

<p>有些网站中，点击每个面包渣 “ 阶梯 ” ，则会弹出一个横向链接 （lateral links) 的菜单，用 户可以很方便地访问网站层级中的不同位置，而无须多次点击鼠标。这个技术，与最近发布的 Windows
    操作系统自带的文件浏览器的界面很相似。</p>

<p><font size="5">0</font> 设计原则</p>

<p align="right" height="0pt" width="0pt">带有横向链接的 “ 面包渣 ” 让导航更快捷。</p>

<p>内容导航</p>

<p>另一类重要的导航是内容导航，例如对照片和文章的导航。这些东西的数量通常都十分庞 大，内容也经常发生变化，内容之间也有关联，但这些关联并非线性结构或层级结构。这些特 点使得内容导航具备自己特有的模式，且带来一定的挑战。</p>

<p>最常用的方式是将内容条目组织成列表 —— 例如把每个文章的标题和简介列出来，排成一 个序列，或是将照片组织成画廊的形式。受到博客及 Twitter 和 Facebook 等社交软件的启发， 目前很多网页的列表，开始采用 “ 推送 ”
    格式的设计风格。</p>

<p>有些项目比较新、比较重要，或者更有可能受到观众的喜欢，因此如果能将这些内容标注 出来，则便于用户导航。我们可以用较为突出的版面设计，或者是改变它们在页面上的大小和
    位置。如果采用轮显来列出内容，则可以在视觉上突出这些特殊的内容。</p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 20 章网页的设计</p>

<p>内容应该可以按照一些方式来组织和排序，例如按主题、作者或发布时间等。有些公司或 行业还有一些特殊的内容分类和排序条件，应加以考虑。有些情况下，可以同时使用几种导航 方案来浏览内容，或者是采用接下来我们要讨论的分面搜索技术
    （faceted search )。</p>

<p>搜索</p>

<p>搜索，是网页上最重要的导航方式之一。根据大量的观察和研究，我们发现，尽管搜索算 法在不断改进，但大多数人并不擅长使用搜索条件，大多数人并不知道该如何调整搜索格式，
    才能更好地找到自己想要的结果。谷歌多年来认为，经过训练的人可以用搜索来取代导航，这 个想法基本上是错误的。</p>

<p>这意味着，既然搜索离完美还差得很远，你的网页或应用就必须要想办法让搜索更有效地 发挥作用。比如，让用户先搜索一下，然后想办法将用户带到列出了她可能需要的内容的页面。
    要实现这一点，有很多好办法。有时，我们可以同时运用这些好办法，帮助用户尽快找到所需 内容。在第 19 章中，我们曾经讨论过在移动应用中运用的一些搜索技巧等，这些技巧对网页应 用同样有效，我们下面就来谈谈。</p>

<p>搜索技术中最成功的创新是 “ 自动填充 ” （ auto-complete) ，也叫作 “ 预先键入 ” （ typeahead )。 当用户开始敲击键盘输入字母时，搜索栏会自动完成关键字搜索并呈现出来，有时也会呈现出
    先前搜索过的词语（如谷歌搜索）或实际的搜索结果（如苹果 OS X 中的 Spotlight 搜索功能)。 自动填充提升了用户搜索获得有意义结果的概率（如图 20-7 所示)。</p>

<blockquote>
    G 〇 v &gt;gle | softwi software
</blockquote>
<blockquote>
    software engineer software defined networking software engineer salary
</blockquote>
<blockquote>
    Press Enter to search.
</blockquote>
<p><font size="2">图</font> 20-7 <font size="2">谷歌搜索的自动填充功能，会自动显示出一系列用户正在输入但尚未完成的词语。</font></p>

<p>去模糊（ disambiguation) 或自动推荐（ auto-suggest) 是谷歌搜索使用的另一项技术。如图</p>

<p>20- 8 所示，如果搜索者正在键入的词汇，在拼写上同另一个更为常用的词语有些类似（或者更 常见的情况是，搜索者的拼写是错误的），则谷歌搜索会显示出推荐的词语以及搜索结果，同时 还会在顶端放置一个链接，指出谷歌推荐的搜索词语。</p>

<p>前面说过，即便用户擅长运用搜索条件和搜索格式，还是会得到一大堆的搜索结果，他依</p>

<p>然需要在搜索列表中寻找所需内容。这种场合适合让分面搜索 （faceted search )出面 它可</p>

<p>以让用户指定被搜索条目的属性，是一种十分有效的搜索方式（见图 20-9 )。</p>

<p align="right" height="3em" width="0pt">477</p>

<p><img align="baseline" alt="" height="29" src="../Images/Image00340.jpg" width="51"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00035.jpg"/></p>

<p><img align="baseline" alt="" height="67" src="../Images/Image00356.jpg" width="54"/></p>

<p>About Face 4 :交互设计精髓</p>

<p><font size="1">G〇 gle suftwar</font> <font size="1">suftware Remove</font> <font size="2">software</font></p>

<blockquote>
    <font size="2">software engineer software as a service</font>
</blockquote>
<blockquote>
    <font size="1">About 73,700 resets (0.79 seconds)</font>
</blockquote>
<blockquote>
    Did you mean: <font size="2">software</font>
</blockquote>
<p><font size="2">Suftware</font></p>

<p><a href="http://www.suftwai"><font size="1">www.suftwai</font></a></p>

<p>Solutions L.L.C</p>

<p>CZ3 ①</p>

<p>Microsoft <font size="2">Software</font> Sale <a href="http://www.calibex.com/Micn%C2%BBaft-Softwan"><font size="1">www.calibex.com/Micn»aft-Softwan</font></a>
</p>

<p><font size="1">Great Deals on Microsoft Software Get Vista, XP, Office and More.</font></p>

<p><font size="1">» Solutions L.L.C. is a Phoenix based consultinfl firm focusing on web nent 抓1</font> <font size="1">旧M
    based software solutions. Using 旧M Rations丨</font> <font size="1">loote we help</font> Download S&lt;</p>

<p>free download genuine window <font size="2">suftware</font> for laptop - Microsof..</p>

<p><font size="1">an8w®rs,mcft&gt;so&lt;l.com/. .»ufhwr«-.7c221048S^&gt;252-44«f-b1(9-598775... *</font></p>

<p><font size="1">Mar 1.2013 •</font> <font size="1">Th®fB</font> <font size="1">«</font> <font size="1">no source for a
    legitimate download of never wil</font> <i>be.</i> <font size="1">WmxJovw XP</font> <font size="1">has been out of
    drculation for many.</font></p>

<p><font size="1">Over 100 of the Download Free tor PC</font></p>

<p><font size="2">Software</font> <font size="2">Select</font></p>

<p><font size="1">trt.com/download v best prog</font> <font size="1"><s>r</s></font> <font size="1">am</font> <font
        size="1"><s>s</s></font> <font size="1">for PC and Mac</font> Computer <font size="2">Software</font></p>

<p><font size="1">vwvw.8hop4”.com/Computer+8oflwar« ,</font></p>

<p><font size="2">图</font> 20-8 <font size="2">谷歌搜索还可以自动推荐，对用户键入的词语进行模糊匹配，并显示出一个推荐词语的列表。此外，在搜索框
    中，还提供了自动修改拼写错误的功能。</font></p>

<p><font size="2">图</font> 20-9 Yelp <font size="2">提供了有效的分面搜索机制，用户可对搜索进行微调</font></p>

<p>设计原则</p>

<p align="right" height="5pt" width="0pt">自动填充、自动推荐、分面搜索可以让用户更快地找到所需的东西。</p>

<p>自动填充、自动推荐令用户可以组织出较为精确的搜索用词，这样，用户以一种建设性的</p>

<p>478</p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 20 章网页的设计</p>

<p>方式，缩小了他们的搜索范围。分面搜索机制，可进一步将被搜索对象的特征和属性展现出来， 让用户将搜索结果集缩小至能够发现所需内容的结果。我们在第 14 章讨论过基于属性的排序和 筛选 （sorting and filtering)
    ，我们在设计分面搜索时也可以借鉴。</p>

<p>分类推荐 （categorized suggestions) 是提高搜索效率的另一种方法，主要用于当搜索用词 适用于多个领域或类别中。分类推荐中，系统会给出一个推荐列表，每项推荐都会针对一个类
    别。亚马逊有数十个销售部门，均很好地运用了分类推荐（如图 20-10 所示）。</p>

<p>3ITI3Zpn <font size="1">MS wp</font></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00173.jpg"/></p>

<p>图20-10亚马逊在主搜索框中很好地运用了分类推荐，用户既可以先点击搜索域左侧的下拉菜单指定搜索类别，也可 以在用户键入字词的同时，立即显示出推荐的分类。</p>

<p><br/>
    <br/></p>

<p>滚动</p>

<p>基于页面的网页体验最明显的特征之一，是使用最为广泛的 “ 滚动 ” （ scrolling )。基于屏幕 和视图的本地应用软件，通常都有着固定屏幕布局，包含多个窗格等。尽管这些部件也可以滚
    动，但对于本地应用来说，最好的设计方式是将一些常用的关键功能永久地固定在某个位置。 虽然，在编辑文档时，用户需要滚动操作，但他们并不希望看到工具栏也跟着一起滚动。</p>

<p>在滚动的问题上，网页和本地应用是不同的。网页体验中，重要的信息和功能都是可以滚 动的，而且有时必须要滚动才能看到并操作它们。有相当长的一段时间，网页设计师始终都在 担心这种被 “ 收起来 ” 的感觉并不太好（ “ 收起来 ”
    ，即页面垂直向下尚未滚动出来的、被遮住 的部分）。但随着触屏交互及其他的如苹果 Magic Trackpad 等类似交互的大量涌现，比起原来 烦琐的滚动条操作，现在的滚动变得越来越自然，用户也越来越接受。</p>

<p>而且，现在用手机上网的人越来越多，这更突显出自适应网页设计 （responsive design )的</p>

<p align="right" height="2em" width="0pt">479</p>

<p>重要性。自适应设计，指的是界面可以自我调整，从而去适应任意尺寸的屏幕（我们将在下一 节中详细讨论这个话题 ) 。由于自适应设计的界面，在小屏幕上会自动缩小，这样操控起来可能 没有那么轻松。</p>

<p>在解决这个问题的过程中，人们发现，成功的网页设计必须要吸引住用户，让用户在滚动 网页时能够注意到网页中的内容或功能。这不仅要求内容的编辑要吸引人，而且还要求交互方 式也吸引人。视差（ parallax)
    效果，就是当今流行的一种新型交互方式，当用户滚动页面时， 页面上的元素会按照不同的速度移动。</p>

<p>很多企业软件也逐步进入触屏时代。原来的那种枯燥的、长长的滚动内容和交互方式，现 在正在慢慢地被更加无缝结合了内容和交互元素的、更加引人入胜的交互所取代。</p>

<blockquote>
    於设计原则
</blockquote>
<blockquote>
    让滚动变得更投入。
</blockquote>
<p>要想创造出有效的视觉节奏，可以运用白色空间和强烈的版面系统，还可以在触屏上用相 对较大的字体和控件，便于使用者操控，增加滚动时的可扫描性（ scanability) 。同样重要的， 要让用户始终知道自己在长长的滚动页上所处的位置。
    Nest 网站（如图 20-11 所示）由一系列 长长的滚动网页构成，以其中的 “Life with Nest” 页面为例，它以时间为线索，用户向下滚动 时，它会逐步展现出 Nest
    计划按时间演进的过程，一级导航始终停靠在页面的顶端，上面显示 出日期的视觉提示。</p>

<p>对于一个完整的内容单元来说，比较明智的做法是将它放在一个滚动页面中。然而，现实 中有很多网站会将它分割成多个网页，这背后的原因不是为了消除或降低滚动的工作量，也不
    是为了减少网页加载时间，而是通过多次加载网页获得最大的广告收入。如果内容是有限的， 则这种分页的做法会让内容查找、网页保存及其他使用网页内容的工作变得错综复杂。分页仅
    适用于非常长的具备类似元素特征的列表，例如搜索结果和新闻文章。</p>

<p>页眉和页脚</p>

<p>页眉和页脚是滚动页面上最显著和最重要的两个位置，是能够改善用户流的特殊区域。 页面顶端，也叫页眉，是用户打开网页时首先看到的地方。在很多情况下，我们故意把最重要
    的内容从页眉下方移到最前端，让页眉略为后退并靠近背景的位置。页眉通常都包含了品牌元 素（例如企业标示等）、一些永久固定的导航项目，以及一级导航项目（前面讲过了）。页眉通
    常也是网站上用户注册的入口（如果需要注册的话）。最后，搜索框也经常驻扎在页眉上。</p>

<p>480</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00033.jpg"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00335.jpg"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00328.jpg"/></p>

<p>第 20 章网页的设计</p>

<p><font size="2">Get to know each othen</font></p>

<p><font size="1">m</font> 的鉍哟饼 <font size="1">on</font> 饮 <font size="1">S</font> 、《 <font size="1">w?</font> 卿 <font
        size="1">f ___&amp;</font> 為卸 谢編陳 <font size="1">_ «_</font> 热鲚泰</p>

<p>! <font size="1">嫩相哪</font> dboitt <font size="1">卿场祕</font> y&lt;K«f</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00328.jpg"/></p>

<p><font size="2">图</font> 20-11 Nest <font size="2">网站包含了一系列长长的滚动页。</font></p>

<p>481</p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p><img align="baseline" alt="" height="152" src="../Images/Image00110.jpg" width="66"/></p>

<p><img align="baseline" alt="" height="124" src="../Images/Image00334.jpg" width="98"/></p>

<p><img align="baseline" alt="" height="66" src="../Images/Image00315.jpg" width="54"/></p>

<p>页面的底端，即页脚，是用户阅读完全部页面内容并结束的地方（如果网站能吸引住用户 并很幸运的话），因为所有的内容都位于页脚的上方。因此，这个位置适合放置用户下一步该去
    哪儿的建议，下一步去的地方通常和刚刚阅读完的内容有关。很多媒体类网站都采用了这种模 式。页脚的另一个用途，是访问某些信息的永久固定的入口，例如法律声明，或是包含了本网 站所有内容的一级和二级导航项目的 “ 胖导航 ” 信息（如图
    20-12 所示)。这当然是个非常有效 的办法，但我们也要考虑一下用户是否有必要访问这些东西，也要考虑用户浏览网页的熟练水 平是否能让他们到达页面的底部。</p>

<blockquote>
    <font size="1"><font color="#FFFFFF">i:'.-Hr</font></font>
</blockquote>
<p><font size="1"><font color="#FFFFFF">AflDefsrtmcnb</font></font></p>

<p><font size="1"><font color="#FFFFFF">FAQs</font></font></p>

<p><font size="1"><i><font color="#FFFFFF">Oynta^ Info</font></i></font></p>

<blockquote>
    <font size="1"><font color="#FFFFFF">and Mvrns</font></font>
</blockquote>
<p><font size="1"><font color="#FFFFFF">Sflcvm Shoppy</font></font></p>

<p><font size="1"><font color="#FFFFFF">Ft M〇</font></font></p>

<blockquote>
    <font size="1"><font color="#FFFFFF">Guide</font></font>
</blockquote>
<p><font size="1"><font color="#FFFFFF">Modd Meamjrfimeirts</font></font></p>

<p><font size="1"><font color="#FFFFFF">StmCp^csnson Owt</font></font></p>

<p><font size="1"><font color="#FFFFFF">About 2«ppo®</font></font></p>

<p><font size="1"><font color="#FFFFFF">Toon</font></font></p>

<p><font size="1"><font color="#FFFFFF">CUflComtr T«^&lt;m〇nak Program Gioinfy of Tarms Oa*y</font></font> <i><font
        color="#FFFFFF">Shot O^est</font></i> <font size="1"><font color="#FFFFFF">2U〇)p&lt;» Itemrcfs
    Visa</font></font> <font color="#FFFFFF">Cormict iMti U»</font></p>

<p><font color="#FFFFFF">^ ■</font></p>

<p align="right" height="0pt" width="0pt"><font color="#FFFFFF">•-</font></p>

<p><font size="1"><font color="#FFFFFF">Z^posSuff</font></font></p>

<p><font size="1"><font color="#FFFFFF">Gel $2S back</font></font> <font size="1"><font color="#FFFFFF">after your first
    purchase.</font></font></p>

<p height="0pt" width="0pt"><font size="5">CHECK OUT OUR BLOG</font></p>

<p><i><font color="#FFFFFF">toywim</font></i></p>

<p><font size="1"><font color="#FFFFFF">^&gt;J014 - Z«pp〇».&lt;nm 〇r ffni</font></font></p>

<p><font size="1"><font color="#FFFFFF">，It oumfd tnr Z«pp〇i Inc.</font></font></p>

<p><font size="1"><font color="#FFFFFF">MncXOT csrtti M i</font></font></p>

<p><font size="1"><font color="#FFFFFF">(BPt 〇r 400 £ SlV</font></font></p>

<p><font size="1"><font color="#FFFFFF">r Servo* c«)0&gt; W%i«n</font></font></p>

<p><font size="1"><font color="#FFFFFF">Sf^rt Avfnu*r I fVodm «n Zappo^avn art</font></font> <i><font color="#FFFFFF">mM
    Wf</font></i> <font size="1"><font color="#FFFFFF">ZW« R«bb, fc.</font></font></p>

<blockquote>
    <i><font color="#FFFFFF">o^1</font></i> <font size="1"><font color="#FFFFFF">liw W br 2w〇e ort CwtK
    Inc</font></font> <font color="#FFFFFF">wv^n, i^moi</font>
</blockquote>
<p><font size="2">图</font> <font size="2">20-12 Zappos.com</font> <font size="2">网站的</font> <font size="2">“</font>
    <font size="2">胖页脚</font> <font size="2">”</font> <font size="2">，包含了精缩版的网站地图、社交网站链接、促销信息和链接等</font> <font size="2">-</font>
</p>

<p>分页 VS .无限滚动</p>

<p>社交媒体流和搜索结果页面的滚动模式，一般来说，都是无限滚动的 （Infinite scrolling )。 也就是说，当用户向下滚动时，页面到达底部后，会自动再显示出新的内容。底部新内容自动
    显示的延迟，如果控制得当，可以是一种自然的、有用的交互方式。</p>

<p>与 “ 无限滚动 ” 对应的是，分页显示（ paging) 结果。预先限定好数量的结果条目，会显 示在一个页面上，同时页面上还会出现页码、前一页、后一页的链接，以及结果的幵头和结尾 , 以及跳转到任意指定页码的链接等。</p>

<p>设计原则</p>

<p align="right" height="8pt" width="0pt">无限滚动与网站页脚是互斥的习惯用法。</p>

<p>使用 “ 无限滚动 ” 时，一定要记得，这个滚动是无限的，用户是永远到达不了页面底端的。 这意味着如果设置了页脚，用户也是看不到的。因此，无限滚动和页脚是互斥的习惯用法。</p>

<p>此外，无限滚动还可能产生出其他的可用性问题，因此要慎重使用 :</p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 20 章网页的设计</p>

<blockquote>
    • 键盘和屏幕阅读器导航，在无限滚动页面上，通常无法有效工作，会导致一些访问性 (accessibility) 的问题。
</blockquote>
<blockquote>
    • 除非精心设计和编码，否则当用户在浏览器上用后退键回到无限滚动页面时，滚动页 面是无法记住上次浏览完毕离开时的位置（先按前进再回来，也有同样的问题）。这令 用户缺乏安全感，用户将不得不再重新滚动，这是费力而令人沮丧的体验。
</blockquote>
<p>无限滚动适合的场景是，我们无法直接到达某个页面，或者是无法预测滚动到何时才能看 到所需信息。因此，对于推送新闻这类的内容，无限滚动是非常合适的，当我们向下滚动时，
    扫描过或看过的信息也迅速地失去了它们的相关性，只有眼睛盯住的、当前屏幕上的内容才是 用户当前最关注的信息。</p>

<p>如果用户需要快速到达信息列表的底部，则此时不要使用无限滚动。如果浏览了一圈后， 用户还需要回到先前的某个位置，也不要使用无限滚动。</p>

<p>移动网页</p>

<p>在网页的早期阶段，设计者们就开始考虑，如何才能设计出可以在同时运行在不同操作系 统上、不同浏览器上、不同大小的屏幕上的网页。而当前激增的移动用户，也开始大量地使用
    平板和手机浏览网站。此时，如何才能设计出满足不同大小的屏幕并且渲染优美的页面，是设 计师们最为关注的问题之一。</p>

<p>目前有一种常用的、同时满足不同大小的屏幕的界面技术，叫作自适应设计 （responsive design) 。这是个需要深入讨论的话题，读者如果感兴趣，可多花点时间阅读这方面的书籍，例 如我们推荐的一*本是 Ethan
    Marcotte 的 （ A Book Apart 出版社于 2011</p>

<p>年出版）。</p>

<p>本书仅在此简单介绍自适应设计。自适应设计，首先运用了一个模块化的布局网格，里面 的内容区域可以灵活地变大缩小。此外，它定义了几个关键的屏幕宽度，被称之为 “ 临界点 ” (breakpoint),
    该网格在临界点前后还能产生出更加显著的变化。例如，如果屏幕的宽度大于 1024 个像素，我们会在页面宽度上显示出三个网格。但如果屏幕的宽度小于 1024 个像素，则 只能显示一个网格，区域块则会垂直地一个摞着另一个 。Boston
    Globe ( 《波士顿环球报》）的 网站就是一个典型的自适应设计示例（参见图 20-13 )。</p>

<p align="right" height="5em" width="0pt">483</p>

<p><img align="baseline" alt="" height="67" src="../Images/Image00124.jpg" width="215"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00050.jpg"/></p>

<p><img align="baseline" alt="" height="193" src="../Images/Image00061.jpg" width="228"/></p>

<p><img align="baseline" alt="" height="162" src="../Images/Image00068.jpg" width="248"/></p>

<p><img align="baseline" alt="" height="151" src="../Images/Image00253.jpg" width="218"/></p>

<p>0BOSTON.COM CARS JOSS REAL ESTATE</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="67" src="../Images/Image00124.jpg"
                                                width="215"/></p>

<p>®ie3B 〇 0ton6lobc BCD50X7. WAYS 1</p>

<p>Hanscom Reid, FAAsays</p>

<p>A private plane ran off a ranw«)r at Haoscom Pleld and entpted in fUmes. officials sudd. 56 mmutM ago Small plane</p>

<p>crashes at</p>

<p>Scott <font size="2"><i>htmvn</i></font> got big 5«take in obscure Florida firm Rubby Dc La Rosa leads Red</p>

<p>De <font size="1"><i>IA</i></font> Rom fired seven shotout inain^ victory at Peoway Piric. 0&lt;)0 am</p>

<p><font size="1">•</font> Box score: Red Sox'</p>

<p><font size="1">•</font> Notebook: <font size="1"><i>Rnyn9</i></font> 1&gt;«'</p>

<p>Sox past Rays</p>

<p>&gt; the Red Sox rolM to</p>

<p><font size="1"><i>Fw</i></font> as advisory role with a West Falm Besdi company, Bro«m received stock which wiss
    worth onDkn a! the time. (hOOwn • SEC report on the Fla. Arm</p>

<p><font size="1">7，SUy» •</font></p>

<p>vid Price UAhe* back <font size="1">鼸丨</font> Drnvid Orlix Bridgewater State IIBl Hospital s!(mr to <font
        size="2"><i>Rsy^</i></font> David Price lashes back at David</p>

<blockquote>
    &nbsp;
</blockquote>
<p align="right" height="0pt" width="0pt">brace change</p>

<p align="right" height="0pt" width="0pt">While other nicnUl health centrni</p>

<p align="right" height="0pt" width="0pt">rhfir nf oyhidnn ami</p>

<p><font size="5">沉</font> he <font size="5">彩</font> o$ton(!5lobe 1 •傷</p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                &nbsp; <font size="1">8CCTI0H8 TODAY'S PAPER 〇</font> <font size="1">MY ftAVCD</font>
            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="right" height="0pt" width="0pt"><font size="1">&nbsp;</font> <font size="1"><i>a</i></font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>
</table>

<p><br/>
    <br/></p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="151" src="../Images/Image00253.jpg"
                                                width="218"/></p>

<p align="right" height="0pt" width="0pt">MICSitfLMfYn/AfiOCXAIlD fRUA</p>

<p>«OSOK7.RAVBI</p>

<p>Rubb&gt; De La Rosa leads Red Sox pastRa&gt;-s</p>

<p>De la Rxm fired seven nhutout innings as tbc Red Sox rolled to a <font size="1">7</font> *i victory «t Fenvo <font
        size="1">〇</font> rpark. OMam</p>

<p><font size="1">•</font> Box score: Red Sox 7* IU&gt;*» i</p>

<p><font size="1">•</font> Notebook: <font size="1"><i>Rmy%9</i></font> David Price lashes <font
        size="1"><i>bmek</i></font> •t David Ortiz</p>

<p>Small plane crashes at Hanscom Field,</p>

<p>FAAsays</p>

<p>A private plane ran off a ranway at Hanscom Field and erupted in flamis, officuls said. SSmmt»ta <font
        size="1">〇</font> o Scott Bnmn got big stake in obscure Floras firm</p>

<p>Forun acMfloiy role with <font size="1">墨</font> West Palm Beach company, Brom nxacivvd ttock whidi wan worth Uion at
    the time. <font size="1"><i>OHO</i></font> am FUu firm $t*3 million it the time. <font size="1">• SEC report on
        the</font></p>

<p height="0pt" width="0pt"><font size="5">K NOTEBOOK</font></p>

<p>fl Ra^s'</p>

<p>;，David Price lashes backat Da\idOrtiz</p>

<p>*Nobod/t bigger than the game of <font size="1"><u>basdxdL …That</u></font> <u>、</u> <font size="1"><u>normal. Part
    of</u></font> Bndgewvtcr^ate Hospital slow to embn <font size="2">change</font> Whik other mental beahh onuc redoced
    thdr ate of fcdu^on tod restniots, Bridgewater rdied on them even more. 0.• <font size="1">〇</font> 0«</p>

<p>Che Boston (Dlobe</p>

<p><font size="1">J«JNC 1. ID14</font> TK)N8 Q MYSAVCO</p>

<p>ihesatHaiLscom</p>

<p>Small Field.</p>

<p>A private plane ran in flames, officials sa id. 53 minutts ago</p>

<blockquote>
    11 plane crash
</blockquote>
<blockquote>
    l^FAAs^s
</blockquote>
<blockquote>
    <font size="1"><i>9</i></font> plane ran off a ruim i, officials said. 53 min Scott Bnmn got big stake in obscure
    Florida firm
</blockquote>
<p>For an advisoiy rofe with a Wcart Ralm Beach covnpany. Brown received stock wfuefa was worth $i^ million at the time.
    <font size="1"><i>OHO</i></font> am <font size="1">• S£C report on the Fla. firm</font> f I9L Bridgewater State I
    lospital slow to embrace diange</p>

<blockquote>
    uscf^icdinioflandrestnufits, Bridgewater rehed oo them even more. <font size="1"><i>OiOO</i></font> am <font
        size="5">■</font> Circus performers risk much to amaze as all
</blockquote>
<blockquote>
    1st the w»ke of <font size="1">屬</font> frigbtfu <font size="1">丨</font> •oddisit in RJ.» a visit <font
        size="2">图</font> 20-13 <font size="2">《波士顿环球报</font> 》（Boston Globe) <font size="2">网站，采用了自适应设计</font> . <font
        size="2">有几个不同的</font> “ <font size="2">临界点”，适合多种尺寸的 屏幕。这样，无论是用台式机，还是平板或手机，网站的内容都可以很好地显示出来。</font>
</blockquote>
<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 20 章网页的设计</p>

<p><img align="baseline" alt="" height="71" src="../Images/Image00046.jpg" width="54"/></p>

<p>设计原则</p>

<p>如果你的网站只有一个版本，一定要把它设计成自适应。</p>

<p>自适应设计的基本观点是，网站或应用无须为不同的屏幕尺寸设计多个版本，一个可以动 态适应多种大小屏幕的版本足矣。这种设计方式，有好处，也有坏处。好处是，所有开发人员 组成单一团队，面对单一的概念框架。坏处是，这个单一的 UI
    会比较复杂，每出现一次“临 界点 ” ，就意味着要多开发一个布局。</p>

<p>另一种方法（有时或许是更加有效的方法），就是为网站或应用单独创建移动版本。虽然移 动设备的屏幕尺寸不尽相同，但这几乎是不同移动设备间唯一的大的区别。额外需要考虑的还 有，输入方式 ——
    触屏还是其他传感器输入，阳光下及其他特殊光线下屏幕浏览效果等。由于 这些问题，我们认为为移动设备单独创建一个网站版本还是非常有必要的。</p>

<p><font size="6">未来</font></p>

<p>网站建站技术变得越来越强健了，浏览器的功能也越来越丰富，可以支持多种交互模式。 因此，我们认为，浏览器在未来仍然是一种最重要的 UI 平台。因 HTML5, 还会出现更加复杂
    的视觉表现和交互方式。浏览器还将提高它的本地数据缓冲技术，让本地应用和网页应用的最 后一点区别最小化。</p>

<p>传统媒体，例如电视和打印输出，和网页的界限也越来越模糊。随之而来，很多新型的内 容模型、讲故事的新方法，以及人们同媒体的交互方式，也会越来越多。看看《纽约时报》创 办的 “Medium”
    网站，所有的人都可以在上面协同创作内容，它如同美丽的飘雪，让我们感觉 到网页即将成为软件和媒体真正交汇的最重要的场所。</p>

<p>注释 .•</p>

<div height="4pt"></div>

<ol width="0pt">
    <li align="justify" height="0pt" value="1" width="0pt"><a href="http://exis">http://exis</a> 网页
        .net/menu-eats-hamburger
    </li>

    <li align="justify" height="3pt" value="2" width="0pt"><a
            href="http://www.nngroup.com/articles/incompetent-search-skills/">http://www.nngroup.com/articles/incompetent-search-skills/</a>
    </li>
</ol>

<blockquote>
    485
</blockquote>
<p><font size="7">第21章</font></p>

<p align="right" height="0pt" width="0pt"><font size="7">设计细节:控件和对话框</font></p>

<blockquote>
    虽然不同平台上的一些视觉设计是不同的，但大部分平台上的控件和对话 框是一样的，它们是用户与各个数字产品的通用交互语言。这些标准的东西， 在大部分的 GUI 开发库里都有，存在着被滥用或误用的可能。
</blockquote>
<blockquote>
    本章将概要介绍一 S6M 用的 GUI 交互控件，还将讨论它彳 flit 合使用的和不适 合使用的场合。
</blockquote>
<p><font size="6">控件</font></p>

<p align="right" height="1em" width="0pt">控件是使用者同数字产品进行交流的屏幕对象，它具有自包含性。有时也被称作小部件 (widget) 、小配件（ gadget) 、或者小零件（ gizmos),
    是创建典型图形用户界面的主要构造模块。</p>

<blockquote>
    根据用户目标，控件可分为四种基本类型：
</blockquote>
<blockquote>
    • 命令控件（ imperativecontrol), 用于启动功能。
</blockquote>
<blockquote>
    • 选择控件 （selection control), 用于选择选项或数据。
</blockquote>
<blockquote>
    • 输入控件 （entry control), 用于输入数据。
</blockquote>
<blockquote>
    • 显示控件（ displaycontrol), 用于控制应用 “ 如何 ” 及 “ 在哪里 ” 展示它自己及数据。 有些控件包含了上述一种或者几种类型。
</blockquote>
<p>486</p>

<p><span id="filepos0002602752"></span></p>

<p>命令控件</p>

<p>人机交互涉及一种由名词（有时候称为对象）、动词、形容词和副词组成的语言。当我们发 起命令时，我们便指定了动词 —— 它是动作的声明。动作所影响到的那个东西，是句子里的名
    词。有时候我们从已存在的列表中选择名词，有时候输入一个新名词。我们分别用形容词和副 词来修饰名词和动词。</p>

<p>与动词相对应的控件类型叫作命令控件 （imperative control), 因为它产生动作，而且往往 是立即执行的动作。菜单栏中的条目（我们在第 18 章讨论过），也属于命令习惯用法。在控件
    世界里，命令习惯用法的精华例子是按钮。单击按钮，也就触发了与按钮相关联的动作，此时 与它相关联的那个动词，将被立即执行。</p>

<p>按钮</p>

<p><img align="baseline" alt="" height="38" src="../Images/Image00294.jpg" width="224"/></p>

<p>按钮，在相当长的一段时间里，都是具有三维凸起的特征。不过，在进入移动时代后，这 种流行趋势发生了变化，三维印记被移除了，按钮的可学性（ leamability) 变差了，如图 21-1
    所示。一般来说，如果控件是矩形（有时是圆角矩形），那么它就具有命令的能供性（ affordance )。 用户只要单击并释放鼠标，它就立即执行。在对话框中（本章后面会谈到），总有一个默认按钮 (default button),
    常常被高亮显示，将最合理的动作标示出来。</p>

<blockquote>
    OK Cancel
</blockquote>

<p>| <u>Cancel]</u> <i>^</i> QK )</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="38" src="../Images/Image00294.jpg"
                                                width="224"/></p>

<p><font color="#FFFFFF">Cancel OK</font></p>

<blockquote>
    <font size="2">图</font> 21-1 <font size="2">各种平台上的标准按钮：微软</font> Windows ( <font size="2">左上）、苹果</font> OS X ( <font
        size="2">右上）、安卓（左下</font> ）、iOS ( <font size="2">右下）。虽然 按钮曾经一度具备</font> 3D <font size="2">特征，但现在变得扁平化。</font>
</blockquote>
<p>可以证明，在设计师的工具集中，按钮是视觉上最引人注目的控件。因此在用户界面中演 化出如此多的变体也就不奇怪了。在当代，人造三维按钮的操作启示促进了它的广泛使用。</p>

<p>按钮在外观上暗示用户，即它具有一些视觉受范性 （visual pliancy )。这种受范性在暗示着 用户，它具备 “ 可按压性 ” 。当用户用鼠标单击按钮时，按钮在视觉上会发生改变，从凸起变为 凹下，表示它已被激活。正如我们在第
    19 章中讨论过的，这是一个动态视觉暗示的例子。设计 糟糕的应用，以及许多网站上绘制的按钮，单击时没有发生任何变化。对于开发者来说（特别 是在网页上），这样做既便宜又容易，但对用户来说，则非常令人不安。因为它不禁让人产生疑 问： “
    它到底被按下了吗？ ” 用户希望看到按钮改变 —— 这是受范性反应——我们必须满足用户 的期望。</p>

<p>不过，经过了几十年的使用，用户已经将 “ 矩形形状 ” 这一特征与按钮牢固地联系起来。</p>

<blockquote>
    487<br/>
    <br/>
</blockquote>
<blockquote>
    About Face 4 :交互设计精髓
</blockquote>

<blockquote>
    因此即使今天的扁平设计去掉了按钮本身的受范性，用户也仍然可以一眼识别出并使用它们。 图标按钮
</blockquote>

<p>工具栏（ toolbar)( 第 18 章详细讨论过 ) ，现在被广泛使用，已经变得和菜单栏一样为人熟 知。而按钮，也从传统的对话框移居到了工具栏。</p>

<p>在按钮从对话框转移到工具栏的过程中，外观从长方形变成了正方形，上面的文本标签也 变成了图标标签。于是， “ 图标按钮 ” 这种半图标、半按钮的习惯用法诞生了（如图 21-2 所示)。</p>

<blockquote>
    <i>m</i> <font size="2"><i>Q ^</i></font> ^，=□ <font size="5">，圈既气氧</font> G <font size="5">楚</font>
</blockquote>
<blockquote>
    <font size="2">图</font> 21-2 <font size="2">微软</font> Office <font size="2">中的图标按钮。左边是</font> Windows <font
        size="2">平台下的</font> Office <font size="2">的图标按钮，右边是</font> OS X <font size="2">平台下的</font> Office <font
        size="2">的图 标按钮。可以看到，它们在外观上并没有明显的按钮特征，只有当光标处于它们上方时才显现出来。</font>
</blockquote>
<p>在 Windows 98 中，图标按钮 （icon button ( 也称之为工具栏按钮））继续发展，没有了凸 起的能供性（ affordance), 能供性只有在被点击时才出现。这种改变减少了视觉上的混乱，避
    免了工具栏的过度拥挤。但副作用 —— 初学者难以理解 —— 也随之而来。自 Windows 2000 起 , 只有在鼠标指向工具栏按钮时，按钮能供性才被显示出来。</p>

<p>理论上，图标按钮很容易使用：它们总是可见的，不需要花费太多的时间，也不像下拉菜 单那样需要一定的灵敏度，很常见，也易于记忆，尤其在独占应用中。图标按钮的优点与工具 栏的优点类似，它们两者之间有着解不开的联系。</p>

<p>图标按钮的缺点不是来自按钮部分，而是来自图标部分。大部分人都可以迅速理解其视觉 启示，问题在于，第一次使用的人，很难一下子明白按钮上图像到底是什么意思。</p>

<p>使用者第一次见到某个图标时，通常难以理解它的确切含义，不过工具提示（ ToolTips) 可以帮助解决这个困难。优秀的图标在经过几次使用后，就可以被学会并记住。在中级用户和 高级用户身上，我们可以看到这种典型的情况。</p>

<p>不过，即使是世界上最优秀的图标设计师，也很难设计出来一套让新手用户可以立即理解 的没有文本标签的图标。当然，工具提示可以有所帮助，不过，要是每次都得把光标放在图标
    上面等待提示显示出来，则未免也太啰嗦了。在这种情况下，采用具有清晰文字说明的菜单， 才是更好的手段。微软的带条（ ribbon) 控件（在第 18 章中讨论过 ) ，结合了文本和图标，是
    二者的混合。虽然它牺牲了部分屏幕空间，但对新手用户，或不太常用的命令来说，控件的功 能含义变得十分清晰，也更加易用。</p>

<blockquote>
    488
</blockquote>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p>超链接</p>

<p><img align="baseline" alt="" height="155" src="../Images/Image00217.jpg" width="151"/></p>

<p><img align="baseline" alt="" height="157" src="../Images/Image00132.jpg" width="113"/></p>

<p><img align="baseline" alt="" height="199" src="../Images/Image00045.jpg" width="164"/></p>

<p>超链接（ hyperlink), 或者链接，是 Web 中的一种习惯用法，在各式各样的不同应用中都 可以见到它的身影。一般来说，它的形式是具有蓝色的带有下画线的文本（ CSS 样式中可以自
    由改变默认标准，例如更改颜色、在鼠标悬停时增加高亮颜色等)，可以作为浏览导航的命令控 件。这种直接、有用的交互用法，早已超越其最初的简单用途 —— 即将用户带到下一个网页，
    或展示被点击文本的详细含义等。超链接现在发展成为具备更多用途、实现更多复杂功能的东 西，例如它是构建复杂交易网站（如 Amazon.com ( 图 21-3)) 的导航基础，它还可以实现很多 令人激动的任务。</p>

<blockquote align="center" height="1em" width="0pt">
    Kingsoft Offire for Android (Free) <font size="1">^Corpoi (472)</font> $0,00
</blockquote>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="157" src="../Images/Image00132.jpg"
                                                width="113"/></p>

<p>Microsoft Office Home &amp; Student <font size="2">2010</font> <font size="1">...</font></p>

<p><font size="1">Windows</font></p>

<p align="center" height="0pt" width="0pt"><font size="1">(i.52〇)</font> (732)</p>

<p align="right" height="0pt" width="0pt"><font size="2">$</font> 112.22</p>

<p><font size="2">$</font> 220.00</p>

<blockquote>
    <font size="2">图</font> 21-3 <font size="2">诸如</font> Amazorhcom <font size="2">等大型交易网站，都依赖于由简单超链接构成的导航基础。在超链接的帮助下，亚马逊等
    网站上的大部分东西能运转自如。</font>
</blockquote>
<p>图片也可以作为超链接。不过，由于图片缺乏示能性，特别是在移动设备中，无法用鼠标 悬停来暗示受范性，这种用法可能存在着问题。</p>

<p>糟糕的是，这种习惯用法的用途和成功，却让很多设计者产生了妄想：他们相信可以用下 画线文本来取代更为常用的命令控件，比如按钮或者图标按钮，这样的用户界面会更加好用、
    更加成功。这种想法，在本质上是错误的。因为大多数使用者已经知道，链接是一种仅与浏览 导航密切相关的习惯用法。如果点击一个链接就执行一个动作（例如打开一个对话框），这将是
    非常令人费解和十分混乱的。因此，一般来说，链接还是应该被用在浏览内容上，而在动作和 功能上采用按钮和图标按钮。</p>

<p>在 Web 设计上，有一个实用小技巧，即在同一界面中相邻的位置上，同时运用按钮和超链 接。按钮用于常用的缺省选择，而超链接用于另外一个不常用的选择，用户可以二者择一。这
    种效果很不错，因为按钮的视觉权重和屏幕像素的使用都比超链接要大，因此方便了用户的选 择。遗憾的是，这个技巧在大多数情况下被滥用了，成了 “ 诡计 ” ，它诱导用户不要注意超链接 ,
    而是感觉到只有按钮是界面中的唯一选择。因此，我们一定不要滥用它，否则会降低用户的对 本网站或本品牌的信任感。</p>

<blockquote>
    489<br/>
    <br/>
</blockquote>
<p>设计原则</p>

<p><img align="baseline" alt="" height="69" src="../Images/Image00318.jpg" width="56"/></p>

<p>链接用于导航，按钮用于动作。</p>

<p><span id="filepos0002621449"></span></p>

<p>选择控件</p>

<p>因为命令控件代表了命令，是动词，它操作的是对象 —— 也就是名词。选择控件和输入控 件是两类用于选择名词的控件。选择控件 （selection control )允许用户从一组有效的选项中选
    择一个名词。选择控件还可以被用来设定动作。在直接操作的习惯用法中，名词被定义好了， 选择控件则可以被用来定义形容词或者副词。常见的选择控件有复选框 （check box )、列表框 (listbox) 、下拉列表（
    drop-down list) 和弹出列表（ pop-up list )。</p>

<p>以前，选择控件不直接导致动作，动作通常需要命令控件来触发。现在，情况不一定如此。 有些情形下，比如在网页中作为导航控制的下拉列表，就可以用于触发动作，但这可能会把用
    户搞迷糊。而另一些情形里，比如字处理软件中使用下拉列表来调整字体的大小，这种用法看 起来还算比较自然。</p>

<p>和交互设计中的其他东西一样，这两种做法各有优缺点。如果使用者在发起动作前要做出 一系列的选择，这时应该提供明显的命令控件（也就是按钮)。如果使用者想要立即看到选择的
    结果，并且这个操作也需要很容易地被撤销，则完全有理由让选择控件也变成命令控件。</p>

<p>复选框</p>

<p>复选框（ checkbox) 是最早发明的图形控件习惯用法之一。它很受大家的欢迎，因为单个使 用时它提供了两个选择，而同时使用几个复选框就可以在一个界面上进行多个选择（如图 214 所 示 )
    。复选框有强烈的单击的视觉启示；它有受范区域，当鼠标经过时会突出显示，或者有三维凹 进的视觉处理。（移动设备上的扁平化的视觉设计趋势也影响到了复选框，对其可学性（ leamability)
    有一定影响。）用户单击后，可以看到一个检查标记 （check marker), 用户很快就能学会使用，并 让它按自己的意愿工作：单击做标记，再次单击除掉标记。复选框具有简单、可见、优雅的特点。</p>

<p>然而，复选框主要是基于文本的控件。尽管复选框是熟悉而有效的习惯用法，但它和菜单 一样，存在优点的同时也存在缺点。位于复选框旁边的文本，通常是精心描述的，它可以让复选
    框的意思清楚明确，但用户必须要放慢阅读速度，而且这些文本也占据了数量可观的屏幕空间。</p>

<p>传统上，复选框是方形的。用户通过形状来识别视觉对象，因而方形复选框是一个重要的 标准。方形本身没有好坏之分；只是因为最初的形状就是方形，许多用户早已习惯去辨识这种
    形状。因此，我们没有充分的理由要摒弃这种模式，无论市场营销部门的人和视觉设计师怎么 说，也不要将复选框设计成钻石形的或圆形的（特别是圆形，容易和单选框混淆）。</p>

<p>490</p>

<p><img align="baseline" alt="" height="55" src="../Images/Image00227.jpg" width="239"/></p>

<p><img align="baseline" alt="" height="151" src="../Images/Image00230.jpg" width="310"/></p>

<p><img align="baseline" alt="" height="25" src="../Images/Image00079.jpg" width="25"/></p>

<p><font size="1">0 D〇 not start Server Manager automatically at logon</font> □ Specify the Server Manager data</p>

<blockquote>
    <font size="1">Setting the refresh which can affect th</font>
</blockquote>

<p><font size="2">G Ask to keep changes when closing documents 0 Oose windows when quitting an application</font> <font
        size="1">When</font> <font size="1">&amp;«lecnMiv open</font> <font size="1">documents and windows m4II not
    b«</font> <font size="1">restored</font> <font size="1">when</font> <font size="1">you</font> <font size="1">re-open
    an</font> <font size="1">applkatlon</font> Gmail personal</p>

<p>o</p>

<p>〇</p>

<p height="0pt" width="0pt"><font size="5">VIP</font></p>

<p><font size="2">Unread</font></p>

<p><font size="2">图</font> 214 <font size="2">各种平台上的标准的复选框：微软</font> Windows ( <font size="2">左上）、苹果</font> OS X ( <font
        size="2">右上）、安卓（左下</font> ）、iOS ( <font size="2">右下&gt;。</font></p>

<p><font size="2">我们在这里再一次看到了扁平化的趋势。此外，</font> iOS <font size="2">的复选框突破了方形的传统，采用了圆形设计。</font></p>

<p>开关按钮</p>

<p>复选框是一种二选一的控件，但这个习惯用法不太适合工具栏。不过，我们还是有可能为 复选框加进一些图形元素，就像用图标按钮去改进复选框一样。这里，我们也可以使用简单的 方法允许按钮单击时保持凹进 ——
    或者按下状态，再次单击时则凸起，这是开关按钮（ toggle) ( 如图 21-5 所示）。按下的状态不再是瞬间的，而是锁定直到再次单击。按钮的开关行为，让按
    钮的特征完全改变，成为截然不同的类型：按钮由命令控件成了选择控件。</p>

<p><font size="2">图</font> 21-5 <font size="2">微软</font> Office 2003 <font size="2">里的开关图标</font> . <font size="2">它们的几种状态：扁平、鼠标经过、被点中、被选择。</font>
</p>

<p>开关按钮作为单次选择习惯用法，广泛地取代了复选框，特别适合用于非模态交互中，这 样不会打断用户做决定时的流状态。开关按钮比复选框更节省空间：因为它们依靠视觉识别而
    不是文本标签来表明意图，所以体积更小。当然，这也意味着它们存在着与命令型图标按钮一 样的问题：图标的费解性。此时，工具提示再次救场：这些小小的弹出窗口给了我们足够的文 本来澄清对图标按钮的困惑，而不需要长期占据太多像素。</p>

<p>状态切换按钮：一种应该避免的选择习惯用法</p>

<p>状态切换按钮是一种用于节约界面空间的最常用的控件，但这却让用户极度困惑。最为经 典的状态切换按钮，是音乐播放器上的播放和暂停按钮。播放和暂停被放在了一个按钮上，播
    放用标准三角形图标显示，点击之后变成了标准的两道竖条的暂停图标——而不是像标准的开 关按钮那样会被按下去。</p>

<p>491</p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<blockquote>
    About Face 4 : 交互设计精 fl
</blockquote>

<p>这个控件暗示你可以单击它，所以当它显示为播放图标时，你点击它，音乐就开始播放。 这个时候图标就变成了暂停图标，告诉你如果再点击一次，音乐就暂停了。这种方法的问题在
    于人们可能认为控件是显示当前音乐播放器状态（暂停或者播放两种状态）的指示器。这就意 味着这个按钮会提供两种既非常合理又非常矛盾的解释。控件或者作为状态指示器，或者作为 状态转换的命令控件，但不能同时表示两者（如图 21-6 所示 )
    。当然，音乐播放器中，我们可 以用音乐是否响起作为自然状态指示器，但大多数的应用界面中，这种显式的状态指示是不存 在的。</p>

<p><br/>
    <br/></p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;

            <p><font size="2"><i>r</i></font> <font size="2">^</font></p>

            <p height="6pt" width="0pt"><font size="5">ON</font></p>

            <p align="center" height="0pt" width="0pt"><font size="2"><i>dick/tap</i></font></p>

            <p height="0pt" width="0pt"><font size="5">OFF</font></p>

            <p><font size="2">V )</font></p><br/>
            <br/>

            <p><font size="2">^</font></p>

            <p>控件是 控件是</p>

            <p>OFF <font size="2">状态</font> ON <font size="2">状态</font></p>

            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>
</table>

<p><br/>
    <br/></p>

<p><font size="2">图</font> 21-6 <font size="2">状态切换按钮的效率很高。在一个控件内控制两个相互排斥的选项来节省空间。状态切换控件的问题，在于它</font></p>

<p><font size="2">们无法完成控件的第二个职贵</font> —— <font size="2">告诉使用者它们当前的状态。如果当前处于</font> OFF <font size="2">状态，按钮显示</font> ON
    <font size="2">,那么就无法知</font></p>

<p><font size="2">道状态是什么。如果当前处于</font> OFF <font size="2">状态，它显示</font> OFF, <font size="2">那么</font> ON <font size="2">按钮又在哪里呢？总之，不要使用状态切换按钮。</font>
</p>

<p>这个问题的解决方法，要么是在按钮上标出动词 —— 播放或者暂停，要么用一种更好的方 式 —— 彻底釆用其他技术，比如用两个按钮取代它。这样做使得开关的状态切换更加自然、明
    显。如果在被激活状态时，我们在视觉上让该按钮显示出被强调的状态，则会令该交互更加完 美。然而，糟糕的是，现在几乎所有的音乐播放器依然在使用这种有问题的状态切换机制，在
    播放按钮和暂停按钮间切换，但好也罢、差也罢，大部分用户已经习惯了。</p>

<p>单选按钮</p>

<p>单选按钮 （radio button), 在外观上和复选框很像（如图 12-7 所示)。当汽车第一次装上收 音机时人们发现在行驶中用手旋动调台会危及生命。所以汽车收音机都提供了一种新奇的仪 表盘，由 6
    个镀铬合金的按钮组成，每个按钮对应一个事先调好的电台。有了这个按钮，司机 的视线便不需要离开路面，只要按下一个按钮，就可以调到喜欢的电台。</p>

<p>GUI 上的单选按钮，同它们的机械祖先一样，行为上是相斥的。这意味着选择一个选项 时，以前选择的选项会自动取消。每次只能按下一个按钮。因为相互排斥，单选按钮总是两
    个或多个成组出现，而且每组中只有一个单选按钮可以选中。只出现一个单选按钮是没有意 义的 —— 此时应该使用复选框或者相似的非互斥选择控件。</p>

<blockquote>
    ①译注：单选按钮的英文是radio button,直译就是收音机按钮的意思。作者这里提到了收音机，是告诉 读者，这个单选按钮（收音机按钮)，最早出现在收音机上。
</blockquote>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<br/>
            <br/>
            <br/>
            <br/>

            <blockquote>
                <font size="1">Choose an option, and then specify can connod. (§)</font> <i>Qpn\</i> <font size="1">alow
                remote conneclions to this computer 〇 Mow ramate</font> <i>comdaon</i> <font size="1">lo this
                computer</font> ©Automatically based on mouse or trackpad
            </blockquote>

            <blockquote>
                〇 When scrolling
            </blockquote>

            <blockquote>
                OAlwatys
            </blockquote>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>

            <blockquote>
                <font size="2">-12.222222</font>
            </blockquote>

            <blockquote>
                <font size="2">Animate Icon Ignores Uninstallabillty</font>

            </blockquote>
            </blockquote><br/>
            <br/>

            <blockquote>
                <font size="2">〇 to Celsius ® to Fahrenheit</font>
            </blockquote>
            <br/>
            <br/>

            <p><font size="2">图</font> 21-7 <font size="2">标准单选按钮</font> ：Microsoft Windows ( <font size="2">左上</font>
                ），Apple OS X ( <font size="2">右下</font> ），Android ( <font size="2">左下</font> ），iOS ( <font size="2">右下）。其中</font>
                iOS</p>

            <p>没有单选按钮，用开关控件来替代。</p>

            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" rowspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>
</table>

<p><br/>
    <br/></p>

<p>一个单选按钮和一个复选框所占用的屏幕空间是一样的，但由于单选按钮要成组使用才有 意义，因此它们要占用大量的屏幕空间。单选按钮很适合担当教学的角色，这也意味着它们可
    以合理地用于不常使用的对话框。而在独占姿态应用的界面中，因为它必须迎合日常用户的需 要，下拉列表则更好。</p>

<blockquote>
    正如传统上复选框都是方形的一样，单选按钮都是圆形的，这种形状我们已经用了很多年。
</blockquote>
<p>就像图标按钮可以取代复选框那样，图标按钮也可以取代单选按钮。如果两个或两个以 上的开关图标按钮按组放在一起，并且相互排斥，每次只能锁定其中之一。确切地说，它们 的行为方式与单选按钮相同，这便构成了一组单选图标按钮 （radio
    icon button )。这种更加现 代的用法，使得它们在外观和行为上，不太像传统圆形的单选按钮，而像它们的机械祖先。 Word 工具栏上的对齐控件 （alignment control)
    就是一个非常好的单选图标按钮的例子，如图</p>

<p>21- 8 所示。</p>

<p><img align="baseline" alt="" height="56" src="../Images/Image00224.jpg" width="199"/></p>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> 21-8 Word <font size="2">的对齐控件是一个单选图标按钮组，和单选按钮相似。总有一个图标按钮选中，当单击另一个图标按钮
    时，先前的那个按钮就返回正常凸起状态。这种变体是一种节省空间的习惯用法，很适合经常使用的选项。</font>
</blockquote>
<p>和所有图标按钮的习惯用法一样，单选图标按钮可以有效地利用空间，让经验丰富的用户 依靠空间记忆和模式识别 （pattern recognition) 来分辨它们，同时用工具提示提醒临时用户。
    有些新手用户很聪明，借助工具提示就可以学会；有些用户可能会学得更慢一些。与其他类似 的、具备教学功能的习惯用法一样，这些单选图标按钮也可以确保用户学会。</p>

<blockquote>
    493<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p>开关</p>

<p>开关控件 （switches control) ，是由两个挨着的压缩版的单选按钮组成的。（同时，它也可 被看作是一个单个的、易懂版的复选框，因为两种状态都十分清晰。）它有两个状态，通常是 “ 开 ” 和 “ 关 ” （ on 和
    off), 有时在开关控件的两端会有 “ 开 ” 和 “ 关 ” 的标签，如图 21-9 所示。点 击开关的一端，或在手机上，可以滑动这个具有 3D 特征的幵关控件，就可以将开关置于开或 关的位置。这个控件在移动应用中的 “ 设置
    ” 界面上非常好用，应用的很多属性和选项都可以 选定为开或关。不过，在桌面软件或桌面 Web 应用上，这种控件的操作相对有些笨拙。</p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;

            <blockquote>
                <font size="2">TODAY VIEW:</font>
            </blockquote>

            <blockquote>
                <font size="2">Today Summary</font>
            </blockquote>

            <blockquote>
                <font size="7">o</font>

            </blockquote>
            <blockquote>
                <font size="2">Next Destination</font>
            </blockquote>

            <blockquote>
                <font size="7">Q)</font>

            </blockquote>
            <blockquote>
                <font size="2">Calendar Day View</font>
            </blockquote>
            <br/>
            <br/>

            <blockquote>
                <font size="2">Reminders</font>
            </blockquote>
            <br/>
            <br/>

            <blockquote>
                <font size="2">Stocks</font>
            </blockquote>

            <blockquote>
                <font size="2">Tomorrow Summary</font>
            </blockquote>

            <p height="0pt" width="0pt"><font size="5">C</font></p>

            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" rowspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>
</table>

<p><br/>
    <br/></p>

<p><font size="2">图</font> <font size="2">21-9</font> <font size="2">开关控件在移动应用中十分常见（例如本图显示的</font> <font
        size="2">iOS</font> <font size="2">应用）</font> <font size="2">.</font> <font size="2">特别是在设置界面中.它包含了可以打开和关</font>
</p>

<p><font size="2">闭的属性和选项。</font></p>

<p>组合图标按钮</p>

<p>在下拉列表中，如果我们用单选图标按钮取代图标按钮，此时的界面和 “ 组合框”（参见本 章后面的 “ 组合框 ”（combo box) — 节）相似，我们称之为组合图标按钮 （combo icon button) ( 如图 21-10
    所示）。通常，它是一个右侧有向下小箭头的单一锁定图标按钮，如果你按住箭头 , 就会下拉出一个菜单，包含数个单选图标按钮，使用者可以从中选择所需要的。选定的图标按
    钮就出现在工具栏的箭头旁边，如果单击图标按钮，就会切换图标按钮状态。像菜单一样，我 们可以单击箭头并保持在箭头上，下拉，然后移动到所需的图标按钮上再释放，这样触发了这 个图标按钮。</p>

<p>有一种组合图标按钮的变体，它在组合图标按钮右下角有一个向下或者向右的小三角，来 取代单独的向下的箭头（这可以在微软的工具栏中看到）。 Adobe 在它的工具栏控件中，使用了
    这种变体；同样，在此变体上，我们单击并且按住图标按钮，便可弹出菜单（如图 21-11 所示 , 在 Adobe 工具栏中，菜单向右而不是向下展开）。作为设计师的你，也可以稍微调整这种习惯
    用法。具有创造力的软件设计师总是不断探索，将更多的功能填满总是太小的屏幕。</p>

<p>494<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<blockquote>
    <img align="baseline" alt="" height="442" src="../Images/Image00202.jpg" width="183"/>
</blockquote>
<blockquote>
    <img align="baseline" alt="" height="381" src="../Images/Image00020.jpg" width="248"/>
</blockquote>
<blockquote>
    <img class="responsive-img" align="baseline" alt=""  src="../Images/Image00000.jpg"/>
</blockquote>
<blockquote>
    <img class="responsive-img" align="baseline" alt=""  src="../Images/Image00054.jpg"/>
</blockquote>
<blockquote>
    <font size="2">图</font> <font size="2">21-11</font> <font size="2">左图是</font> <font size="2">Adobe Photoshop</font>
    <font size="2">中的组合图标按钮，右图是</font> <font size="2">Mozilla Firefox</font> <font size="2">浏览器中的组合图标按钮的变体。在</font>
    <font size="2">Photoshop</font> <font size="2">中，组合图标按钮被用来切换不同模态的工具，是用来配置用户界面的。在</font> <font
        size="2">Firefox</font> <font size="2">中，它们被用来调取访 问过的网页，执行一个动作。</font>
</blockquote>
<p><font size="2">图</font> <font size="2">21-10</font> <font size="2">微软</font> <font size="2">Office</font> <font
        size="2">中的组合图标按钮，其行为类似于组合框。</font></p>

<blockquote>
    <font color="#EBEBEB">|N \-vv</font> <font size="1"><i><font color="#EBEBEB">0</font></i></font>
</blockquote>
<p><font color="#EBEBEB">1 V V:</font> <font size="2"><font color="#EBEBEB">鈦</font></font> <font color="#EBEBEB">u't'o.a
    '</font> <font size="2"><font color="#EBEBEB">□‘铽羡</font></font> <font color="#EBEBEB">Vxf^v K I#' ■</font></p>

<p>)Work | Cooper <font size="2"><i>V</i></font> Coop«r I A user experience design and strategy firm <font
        size="2">G</font> Cizmodo - Tech By Design Q gizmodo - Coogle Search 3 The Last Stand Photographs by Marc
    Wilson: Plac <font size="2">«$：</font> Design Observer 3 Design Observer Search</p>

<p>B designobserver - Coogle Sear Q gooyle - Coogie Search M Inbox (1) - leroycale^gmail.a</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00054.jpg"/></p>

<p>微软在 Word 中使用了另一种变体。这里指定突出显示颜色和文本颜色的图标按钮看起来 更像小调色板，而不是图标按钮堆积的组合图标按钮菜单。从图 21-11 中可以看到，这些菜单
    可以将很多效能和信息堆积为紧凑的控件。这种用法肯定是针对那些频繁使用的用户，尤其是</p>

<blockquote>
    495<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设</p>

<p>为经常使用鼠标的用户而设计的，而不是为新手用户设计的。然而，对于那些基本熟悉已有工 具的用户来说，这种习惯用法通常在自己发现或有人示范以后，会马上变得很清晰。对于用户
    需要长时间交互的独占姿态应用来说，这是一个极好的常用控件。尽管单击菜单上较小的图标 , 要求灵巧的手臂和手指的运动，但与调用工具栏和下拉菜单、选择某项、等待对话框出现、选 择对话框上的颜色、单击 “OK”
    按钮等一系列的动作相比，这种组合图标按钮的交互方式的操 作速度更快。</p>

<p>微软在引入了 ribbon 控件后，开始逐步放弃传统的组合图标按钮，转向使用另一种新型的 变体：在标注的菜单中附加一个图标按钮，点击此图标按钮会触发命令，点击图标按钮右侧或 下端的箭头，则会调出一个包含了不常用命令的传统菜单（图
    21-12 )。</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00191.jpg"/></p>

<p><br/>
    <br/></p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00088.jpg"/></p>

<p>图21-12微软Office中的ribbon控件里，包含了一种新型的组合按钮图标。点击该图标会运行命令，点击图标上的箭 头会打开一个包含了不常用命令的传统菜单.</p>

<p><br/>
    <br/>
    <span id="filepos0002662197"></span></p>

<p>列表控件</p>

<p>使用列表控件 （list control), 用户可在一组有限的文本字符串中进行选择，每个文本字符 串代表一个命令、对象或属性。在有些平台上，该控件及其变体会被称为列表框（ listbox )或 列表视图（ listview)
    。和单选按钮一样，列表控件排除了做出错误选择的可能性，简化了交互 过程，非常了不起。</p>

<p>列表控件是一个很小的文本区，右侧有一个垂直滚动条（参见图 2M3 )。框中用离散的文 本行将对象呈现出来，用户可通过滚动条上下移动。用户每单击一次选择一行文本。有一种列 表控件的变体，允许多选，用户单击鼠标，同时按住 Shift 键或
    Ctrl 键，可选多个项目。</p>

<p>我们在前面讨论过，下拉菜单也可以看作是列表控件的一个变体。这种控件无处不在，其 初始状态展示了上次被选中的条目，直到该条目被点击或轻触，其他的选项才出现 ( 参见图 21-13 右图）。</p>

<p>苹果 iOS 系统中引入了一种基于手势的列表控件变体，有些人将它称为 “ 滚桶控件”。该 控件好像一个圆柱体，文本列表被印在了圆柱体的表面上。操作时，我们滑动旋转它，直至需
    要选择的那个条目出现在控件的中央。这个可以滚动的控件很有意思，但最有意思的部分是它 有时可以包含几个独立选择的圆柱，使得它特别适合用来选择日期时间等内容。它设计精巧， 同时运用了几种操控手段，如图 21-14 所示。</p>

<p>496</p>

<p><img align="baseline" alt="" height="104" src="../Images/Image00266.jpg" width="126"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00329.jpg"/></p>

<p>第 21 章设计细节：控件和对话框</p>

<p>Show notifications for</p>

<p>Show notifications for</p>

<p><font size="2">图</font> 21-13 <font size="2">左图是</font> Windows <font size="2">上的列表控件。右图展示的是</font> Windows <font
        size="2">下拉菜单的打开和关闭状态。</font></p>

<p>••oooAT&amp;T *9*</p>

<p>Cancel</p>

<p align="center" height="0pt" width="0pt">2:18 PM</p>

<p align="center" height="11pt" width="0pt">Add Alarm</p>

<p align="right" height="0pt" width="0pt">彳 $ BD Save</p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                &nbsp; 6
            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="right" height="0pt" width="0pt">&nbsp; 28</p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                &nbsp; 7
            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                &nbsp; 29
            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                <font size="5">&nbsp;</font> <font size="5">8</font>
            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                <font size="5">&nbsp;</font> <font size="5">30</font>
            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p height="0pt" width="0pt"><font size="5">AM&nbsp;</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                &nbsp; 9
            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                &nbsp; 31
            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p height="0pt" width="0pt"><font size="5">PM&nbsp;</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp; 10</p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="right" height="0pt" width="0pt">&nbsp; 32</p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>
</table>

<p><br/>
    <br/></p>

<p><font size="2">图</font> 21-14 iOS <font size="2">提供了一种基于手势的</font> “ <font size="2">滚桶控件</font> ” <font size="2">，它是列表视图的一个变体，里面可以放置多个独立的转动圆柱。</font>
</p>

<p><font size="2">它实际上同时运用了几种操控手段。</font></p>

<p>早期的列表控件只能处理文本，这种决策至今仍影响着它们的行为。列表控件包含一行 接一行没有变化的文本，视觉上就像干燥的沙漠。然而，微软从 Windows 95 开始，会在列表
    视图控件中的每行文本前点缀一个图标（无须定制编码的）。这很有用一 • 因为在很多情况下， 用户会从紧挨着重要文本项目的视觉图标中受益（参见图 21-15) 。另一种更新的变体，在下
    拉列表或者其他的列表控件中，列出条目的同时也列出了预览视图。这种变体通常被用在 列表控件具有选择控件和命令控件双重身份的场合下，比如在微软 Word 选择样式的列表控 件中。</p>

<p>497</p>

<p><br/>
    <br/>
    <br/></p>

<p><img align="baseline" alt="" height="360" src="../Images/Image00238.jpg" width="145"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00354.jpg"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00288.jpg"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00164.jpg"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00374.jpg"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00080.jpg"/></p>

<p><img align="baseline" alt="" height="69" src="../Images/Image00069.jpg" width="54"/></p>

<p>About Face 4 :交互设计精髓</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="360" src="../Images/Image00238.jpg"
                                                width="145"/></p>

<p>Automatic Table of Contents</p>

<p>Manual Table of Contents</p>

<p><font size="2">图</font> <font size="2">21-15</font> <font size="2">左边是</font> <font size="2">Windows XP</font> <font
        size="2">里的一个列表控件，用户可清楚地把他们要找的应用辨识出来。右边是</font> <font size="2">Office 2007</font> <font size="2">里
    的样式下拉列表控件这里，给用户展现了每个条目的效果预览。</font></p>

<p>设计原则</p>

<p align="right" height="5pt" width="0pt">用图标来区分列表中重要的文本项。</p>

<p>列表视图，名副其实，对显示列表项有好处，允许用户选择一个或多个项。它也给可拖动 的条目提供了来源（不过，这显然不是下拉的变体），这是很好的习惯用法。如果列表视图中的
    条目是可以拖动的，那么它就为用户提供了一个可以将条目按特殊顺序排列的好工具（见本章 后面的 “ 排序列表”)。</p>

<p>做记号</p>

<p>总的说来，用户选择列表控件中的某个条目，实际上是将它作为某个功能的输入。比如说 从字体列表中选择喜欢的那个字体。我们用突出的颜色显示该选中的条目，这是最传统的“被 选中 ” 的标示方法。</p>

<p>但偶尔列表控件也用来选择多个项，这样问题就复杂了。列表控件中的选择交互，非常适 合单一选择，但对于多重选择，就相对不太适合了 <font size="2">。一</font> 般来说，如果同时可以看见当前的整个
    区域，选择多个离散对象是可以的，就像桌面上的图标一样。如果同时选定了两个或者两个以 上的图标，你可以清楚地看到，因为所有的图标同时都是可见的。</p>

<p>但如果可用的离散项目集合太大，不适合在单个视图显示，而且其中的一些项目必须滚动 才能看见时，选择习惯用法立刻就不适用了。这是列表控件问题中常见的情况。标准的选择模
    态是相互排斥的，所以当你选择一个事物时，先前选定的事物就会取消。在多重选择时，对于</p>

<p>498</p>

<p><br/>

    <br/></p>
</body>
</html>
